Tabs

The Tabs component organizes content into separate sections, where only one section is visible at a time.

Anatomy

A Tabs component is made up of several key parts:

To add a Tabs component to your page:

Update the content of the TabTrigger and TabContent components to match your design.

By default, the first tab is active. If you want a different tab to be open initially:

Add the defaultValue property and set it to the value of the tab you want active (for example, change it from '1' to '2' if you want the second tab open).

To disable a tab, preventing users from selecting it:

You can customize the Tabs appearance and its subcomponents by adjusting their properties through the Properties Panel:

Tabs: Adjust styles like background color, border, and padding to create a card-like appearance or any other desired look.

TabsList: Modify layout-related properties, such as the gap between tab triggers, background color, and padding.

TabsTrigger: Adjust the look of each tab trigger—set background, border radius, and text styles. For consistency, create a shared class and apply it to all triggers.

TabsContent: Customize active content panels by setting background color, padding, and typography.

If you prefer vertical tabs instead of the default horizontal layout:

Set the display as flex and add a gap value to create spacing between the tabs list and the content.

Select the TabsList, go to the Properties Panel, and update its direction to “Top to Bottom”.

Property	Type	Default	Description
defaultValue	`string`	`‘1’`	The value of the TabsContent to initially show. This corresponds to the value prop on the TabsTrigger component and the value prop on the TabsContent component. If no value is set on the TabsContent component, you can use their order instead, starting with `‘1’` (e.g., `‘1’`, `‘item-1’`)
activationMode	`‘manual’ \| ‘automatic’`	`‘automatic’`	When `‘automatic’`, tabs are activated when receiving focus. When `‘manual’`, tabs are activated when clicked.
onValueChange	`Action`	-	The function called when a new tab is selected.

Property	Type	Default	Description
loop	`boolean`	`true`	When `true`, keyboard navigation will last tab to first, and vice versa.

Property	Type	Default	Description
value	`string`	`‘1’`	A unique value to be used by Tabs in the defaultValue property and as the value when open. If no value is provided, the order of the TabsTrigger will be used starting with `'1'`. A unique value for the tab trigger. If not set, the order is used starting from "1".
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the TabsTrigger.

Property	Type	Default	Description
value	`string`	`‘1’`	A unique identifier for the tab content. This should match the value of the corresponding TabsTrigger.