Tabs

A simplified API for the Tabs component, allowing you to define tabs and their content in a single configuration.

Button Brand Horizontal

Content of the first tab

<Tabs items={tabItems} defaultValue="tab1" />

Button Gray Horizontal

Content of the first tab

<Tabs items={tabItems} type="button-gray" defaultValue="tab1" />

Button Border Horizontal

Content of the first tab

<Tabs items={tabItems} type="button-border" defaultValue="tab1" />

Underline Horizontal

Content of the first tab

<Tabs items={tabItems} type="underline" defaultValue="tab1" />

Underline Full Width

Content of the first tab

<Tabs items={tabItems} type="underline" fullWidth={true} defaultValue="tab1" />

Vertical Variants

Content of the first tab


<Tabs items={tabItems} type="button-brand" orientation="vertical" defaultValue="tab1" />
<Tabs items={tabItems} type="button-gray" orientation="vertical" defaultValue="tab1" />
<Tabs items={tabItems} type="line" orientation="vertical" defaultValue="tab1" />

Rich Content Example

Dashboard

Statistics

Your data in real time

Charts

Data visualization


<Tabs
  items={richTabItems}
  type="underline"
  defaultValue="dashboard"
  className="w-full max-w-4xl"
/>

API Reference

Tabs Props

Props	Type	Default	Description
items	TabItem[]	[]	The array of objects defining each tab and its content
size?	"sm" \| "md"	sm	The size of the tabs and badges.
type?	"button-brand" \| "button-gray" \| "button-border" \| "button-minimal" \| "underline"(in horizontal only) \| "line" (in vertical only)	"button-brand"	The visual style of the tabs.
orientation?	"horizontal" \| "vertical"	"horizontal"	Layout direction of the tabs.
fullWidth?	boolean	false	Tabs stretch to take full width.
defaultValue?	string	-	The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
value?	string	-	The controlled value of the tab to activate. Should be used in conjunction with onValueChange.
onValueChange?	function[(value: string) => void]	-	The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
className?	string	-	Extra classes applied to the root component.
listClassName?	string	-	Extra classes applied to the tab list container.
contentClassName?	string	-	Extra classes applied to the content container.

TabItem (Interface)

Props	Type	Default	Description
value	string	—	Unique identifier for the tab.
label	ReactNode	—	The visible tab label. Can include text, icons, etc.
badge?	number \| string	—	Optional badge (e.g. a count or label like "New") displayed next to the label.
content	ReactNode	—	The content rendered when this tab is active.