Tabs

A set of layered sections of content, known as tab panels, that display one panel at a time.

CMSPayload CMS Integration

Tabs can be configured through CMS fields, allowing content editors to create tabbed content sections with localized labels and content.

CMS Demo

See how content editors configure tabs in a CMS:

Get a quick summary of your project status and key metrics.

CMS FieldsEN

Variant

Tabs (3)

This simulates how a content editor manages tabbed content sections in Payload CMS. Each tab can have localized labels and rich text content.

CMS ConfigurationSimulates Payload CMS tabs configuration with localization

Payload Block Example

// In your Payload CMS block config
export const TabbedContentBlock = {
  slug: "tabbed-content",
  fields: [
    {
      name: "tabs",
      type: "array",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "content", type: "richText", localized: true, required: true },
      ],
    },
    {
      name: "variant",
      type: "select",
      options: ["default", "line"],
      defaultValue: "default",
    },
  ],
}

Rendering the Block

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@mordecai-design-system/ui"

export function TabbedContent({ data }) {
  return (
    <Tabs defaultValue="tab-0">
      <TabsList variant={data.variant}>
        {data.tabs.map((tab, i) => (
          <TabsTrigger key={i} value={`tab-${i}`}>
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {data.tabs.map((tab, i) => (
        <TabsContent key={i} value={`tab-${i}`}>
          {tab.content}
        </TabsContent>
      ))}
    </Tabs>
  )
}

Basic Usage

Make changes to your account here. Click save when you're done.

TabsA tabbed content section

Installation

pnpm add @corew500/ui

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@mordecai-design-system/ui"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings content</TabsContent>
  <TabsContent value="password">Password settings content</TabsContent>
</Tabs>

Examples

Line Variant

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
</Tabs>

Vertical Orientation

<Tabs defaultValue="general" orientation="vertical">
  <TabsList>
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="security">Security</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="general">...</TabsContent>
</Tabs>

Controlled

const [value, setValue] = useState("tab1")

<Tabs value={value} onValueChange={setValue}>
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Sub-components

| Component | Description | |-----------|-------------| | Tabs | Root container | | TabsList | Container for tab triggers | | TabsTrigger | Clickable tab button | | TabsContent | Content panel for each tab |

Props

Tabs

Prop	Type	Default	Description
`value`	any	—	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
`defaultValue`	any	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`orientation`	enum	`horizontal`	The component orientation (layout flow direction).
`onValueChange`	(value: any, eventDetails: BaseUIChangeEventDetail<"none", { activationDirection: TabsTabActivationDirection; }>) => void	—	Callback invoked when new value is being set.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

TabsList

Prop	Type	Default	Description
`activateOnFocus`	enum	`false`	Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
`loopFocus`	enum	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`variant`	enum	`default`	—
`fullWidth`	enum	`false`	—

TabsTrigger

Prop	Type	Default	Description
`id`	string	—	Unique identifier for smooth tabs animation tracking
`value*`	any	—	The value of the Tab.
`disabled`	enum	—	Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.