Tabs
A tabs component for organizing content into separate views.
Installation
npm install fuyukaki-uiUsage
import { Tabs, TabsList, TabsTrigger, TabsContent } from 'fuyukaki-ui'
function App() {
return (
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Content 1</TabsContent>
<TabsContent value="tab2">Content 2</TabsContent>
</Tabs>
)
}Default Variant
Account Settings
Manage your account settings and preferences.
Outline Variant
Overview content goes here.
Pills Variant
All items displayed here.
Props
| Component | Prop | Type |
|---|---|---|
| Tabs | defaultValue | string |
| Tabs | value | string |
| Tabs | onValueChange | (value: string) => void |
| TabsList | variant | 'default' | 'outline' | 'pills' |
| TabsTrigger | value | string (required) |
| TabsTrigger | variant | 'default' | 'outline' | 'pills' |
| TabsContent | value | string (required) |
| TabsContent | forceMount | boolean |
