Interaction

Tabs

Tabbed sections for settings, dashboards and previews.

Component

18

Import

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@swirski/ui";

Composition

Tabs
|-- TabsList
|   `-- TabsTrigger
`-- TabsContent

Playground

2 controls

Preview content

Controls

defaultValue

showNotes

Usage

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
    <TabsTrigger value="notes">Notes</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">Preview content</TabsContent>
  <TabsContent value="code">Code content</TabsContent>
  <TabsContent value="notes">Notes content</TabsContent>
</Tabs>

Props

20 generated

Prop	Type	Default	Notes
`Tabs.defaultValue`Required	`string \| (string & readonly string[])`	`-`	Initial active tab value.
`Tabs.onValueChange`	`((value: string) => void)`	`-`	Called when a tab is selected.
`Tabs.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from TabsProps.
`Tabs.tone`	`'blue' \| 'yellow' \| 'black'`	`"blue"`	Generated from TabsProps.
`Tabs.value`	`string`	`-`	Controlled active tab value.
`Tabs.variant`	`'default' \| 'compact'`	`"default"`	Generated from TabsProps.
`TabsList.asChild`	`boolean`	`false`	Generated from TabsListProps.
`TabsList.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from TabsListProps.
`TabsList.tone`	`'blue' \| 'yellow' \| 'black'`	`"blue"`	Generated from TabsListProps.
`TabsList.variant`	`'default' \| 'compact'`	`"default"`	Generated from TabsListProps.
`TabsTrigger.asChild`	`boolean`	`false`	Generated from TabsTriggerProps.
`TabsTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from TabsTriggerProps.
`TabsTrigger.tone`	`'blue' \| 'yellow' \| 'black'`	`"blue"`	Generated from TabsTriggerProps.
`TabsTrigger.value`Required	`string \| (readonly string[] & string)`	`-`	Controlled active tab value.
`TabsTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from TabsTriggerProps.
`TabsContent.asChild`	`boolean`	`false`	Generated from TabsContentProps.
`TabsContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from TabsContentProps.
`TabsContent.tone`	`'blue' \| 'yellow' \| 'black'`	`"blue"`	Generated from TabsContentProps.
`TabsContent.value`Required	`string`	`-`	Controlled active tab value.
`TabsContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from TabsContentProps.

Previous: Tooltip Next: Table