The Tabs component provides an accessible tabbed interface for organizing content into separate panels.
Installation
import {
Tabs,
TabsList,
TabsTab,
TabsPanel,
} from "@craftdotui/baseui/components/tabs";
<Tabs defaultValue="tab1">
<TabsList>
<TabsTab value="tab1">Tab 1</TabsTab>
<TabsTab value="tab2">Tab 2</TabsTab>
<TabsTab value="tab3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab1">Content 1</TabsPanel>
<TabsPanel value="tab2">Content 2</TabsPanel>
<TabsPanel value="tab3">Content 3</TabsPanel>
</Tabs>
Components
Tabs (Root)
Controlled active tab value.
Default active tab for uncontrolled usage.
Callback when active tab changes.
orientation
string
default:"horizontal"
Layout orientation. Options: horizontal, vertical
TabsList
Visual style. Options: default, outlined, ghost
Make tabs fill the full width.
Hide the active tab indicator.
Tab shape. Options: default, pill
Tab size. Options: sm, md, lg
TabsTab
Unique value identifying this tab.
TabsPanel
Value matching the associated tab.
Examples
Variants
<TabsList variant="default">...</TabsList>
<TabsList variant="outlined">...</TabsList>
<TabsList variant="ghost">...</TabsList>
Pill Shape
<TabsList tabShape="pill">
<TabsTab value="tab1">Tab 1</TabsTab>
<TabsTab value="tab2">Tab 2</TabsTab>
</TabsList>
Vertical Orientation
<Tabs orientation="vertical">
<TabsList>
<TabsTab value="tab1">Tab 1</TabsTab>
<TabsTab value="tab2">Tab 2</TabsTab>
</TabsList>
<TabsPanel value="tab1">Content 1</TabsPanel>
<TabsPanel value="tab2">Content 2</TabsPanel>
</Tabs>
Full Width
<TabsList tabsListFullWidth>
<TabsTab value="tab1">Tab 1</TabsTab>
<TabsTab value="tab2">Tab 2</TabsTab>
</TabsList>
Accessibility
- Built on @base-ui/react Tabs primitive
- Keyboard navigation (Arrow keys, Home, End)
- Automatic tab focus management
- ARIA attributes for roles and states
- Active indicator for visual feedback