Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
The parent component manages content visibility based on the selected tab. Use Tabs Container when navigation and content are co-located.
Basic Usage
Overview
This is the overview content. The parent component controls what's visible based on the selected tab.
With Icons and Badges
Profile settings content
Separated Navigation
Place the tab bar and content in different locations, such as a sidebar.
Home content
Line Variant
Code editor
Conditional Visibility
View-only content
Admin tab is hidden (requires admin permission)
Drag-and-Drop Reordering
Content for first (drag tabs to reorder)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabOption[] | Required | Array of tab options |
value | string | number | - | Current selected tab (controlled) |
defaultValue | string | number | First tab ID | Initially active tab (uncontrolled) |
onValueChange | (value: string | number) => void | - | Callback when selected tab changes |
onTabsReorder | (tabs: TabOption[]) => void | - | Callback when tabs are reordered |
variant | "default" | "line" | "default" | Tab trigger style |
orientation | "horizontal" | "vertical" | "horizontal" | Tab list orientation |
draggable | boolean | false | Enable drag-and-drop reordering |
showSeparators | boolean | false | Show separators between tabs |
as | "nav" | "div" | "div" | HTML element (use "nav" for site navigation) |
className | string | - | Additional CSS classes |
TabOption Interface
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier |
label | string | Display text |
icon | React.ReactNode | Optional icon (before label) |
badge | string | number | Optional badge count or text |
disabled | boolean | Disable tab interaction and drag |
visible | boolean | ((tab: TabOption, allTabs: TabOption[]) => boolean) | Visibility condition |
ariaLabel | string | Custom ARIA label |