Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

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";

​
Usage

<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)

​
value
string
Controlled active tab value.
​
defaultValue
string
Default active tab for uncontrolled usage.
​
onValueChange
function
Callback when active tab changes.
​
orientation
string
default:"horizontal"
Layout orientation. Options: horizontal, vertical

​
TabsList

​
variant
string
default:"default"
Visual style. Options: default, outlined, ghost
​
tabsListFullWidth
boolean
default:"false"
Make tabs fill the full width.
​
hideIndicator
boolean
default:"false"
Hide the active tab indicator.
​
tabShape
string
default:"default"
Tab shape. Options: default, pill
​
tabSize
string
default:"md"
Tab size. Options: sm, md, lg

​
TabsTab

​
value
string
required
Unique value identifying this tab.
​
disabled
boolean
Disable the tab.

​
TabsPanel

​
value
string
required
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