Components
Tabs
Tabbed navigation for organizing content into switchable panels.
Tabs
Tabbed interface for organizing content into switchable panels with animated transitions.
Import
import { Tabs, TabsList, TabsTab, TabsPanel, TabsPanels, TabsHighlight, TabsHighlightItem } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<Tabs defaultValue="tab1">
<TabsList>
<TabsTab value="tab1">Account</TabsTab>
<TabsTab value="tab2">Password</TabsTab>
</TabsList>
<TabsPanels>
<TabsPanel value="tab1">
Account settings content.
</TabsPanel>
<TabsPanel value="tab2">
Password settings content.
</TabsPanel>
</TabsPanels>
</Tabs>With Highlight
With Animated Highlight
.tsx
<Tabs defaultValue="general">
<TabsList>
<TabsHighlight className="rounded-md bg-white/10">
<TabsHighlightItem value="general">
<TabsTab value="general">General</TabsTab>
</TabsHighlightItem>
<TabsHighlightItem value="advanced">
<TabsTab value="advanced">Advanced</TabsTab>
</TabsHighlightItem>
</TabsHighlight>
</TabsList>
<TabsPanels>
<TabsPanel value="general">General settings content.</TabsPanel>
<TabsPanel value="advanced">Advanced settings content.</TabsPanel>
</TabsPanels>
</Tabs>Controlled
const [tab, setTab] = useState('tab1');
<Tabs value={tab} onValueChange={setTab}>
<TabsList>
<TabsTab value="tab1">Overview</TabsTab>
<TabsTab value="tab2">Analytics</TabsTab>
</TabsList>
<TabsPanels>
<TabsPanel value="tab1">Overview panel</TabsPanel>
<TabsPanel value="tab2">Analytics panel</TabsPanel>
</TabsPanels>
</Tabs>API Reference
| Component | Key Props | Description |
|---|---|---|
Tabs | defaultValue, value, onValueChange | Root container |
TabsList | className | Tab button container |
TabsTab | value, disabled | Individual tab button |
TabsPanel | value | Content panel for a tab |
TabsPanels | mode | Container with auto-height animation |
TabsHighlight | className | Animated background indicator |
TabsHighlightItem | value | Highlight item wrapper |