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
Tabs with drag-and-drop reordering, conditional visibility, icon and badge support, and visual separators. Use Tabs when you need the tab bar and content in separate locations.
Basic Usage
Overview
This is the overview tab content. Use TabsContainer to organize your interface into logical sections.
With Icons and Badges
Add visual context with icons and display notification counts or status indicators with badges.
Profile Settings
Manage your profile information.
Line Variant
Use the line variant for a minimal, underline-style tab design.
Code editor content
Conditional Visibility
Dashboard content available to all users
Drag-and-Drop Reordering
First tab content - Try dragging me!
Container Styling
Home
Welcome to your dashboard with card background.
Vertical Orientation
General Settings
Configure general application settings.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | Required | Array of tab items with id, label, content, and optional metadata |
defaultValue | string | number | First tab ID | Initially active tab (uncontrolled mode) |
value | string | number | - | Active tab (controlled mode) |
onValueChange | (value: string | number) => void | - | Callback when active tab changes |
onTabsReorder | (tabs: TabItem[]) => void | - | Callback when tabs are reordered via drag-and-drop |
variant | "default" | "line" | "default" | Tab trigger style variant |
orientation | "horizontal" | "vertical" | "horizontal" | Tab list orientation |
draggable | boolean | false | Enable drag-and-drop reordering |
showSeparators | boolean | false | Show visual separators between tab triggers |
separatorClassName | string | - | Custom className for separators |
containerVariant | "default" | "narrow" | "fullMobile" | "full" | "default" | Container width constraint |
padding | "none" | "sm" | "md" | "lg" | "xl" | "md" | Vertical padding |
background | "none" | "card" | "accent" | "dark" | "none" | Background style |
as | "div" | "section" | "article" | "div" | HTML element to render |
className | string | - | Additional CSS classes |
TabItem Interface
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier for the tab |
label | string | Display text for tab trigger |
content | React.ReactNode | Tab content to display |
icon | React.ReactNode | Optional icon (displayed before label) |
badge | string | number | Optional badge count or text |
disabled | boolean | Disable tab interaction and drag |
visible | boolean | ((tab: TabItem, allTabs: TabItem[]) => boolean) | Visibility condition (boolean or callback) |
ariaLabel | string | Custom ARIA label for accessibility |