Tabs
Switch between related panels with keyboard-accessible tabs.
Preview
Import
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@sigil-ui/components";Usage
<Tabs defaultValue="tab1">
<TabsList>
<TabsTrigger value="tab1">Overview</TabsTrigger>
<TabsTrigger value="tab2">Usage</TabsTrigger>
</TabsList>
<TabsContent value="tab1">Overview content</TabsContent>
<TabsContent value="tab2">Usage content</TabsContent>
</Tabs>Sub-components
This component includes the following parts:
<TabsList><TabsTrigger><TabsContent>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-radius-sm | Radius sm |
--s-duration-fast | Duration fast |
--s-focus-ring-width | Focus ring width |
--s-focus-ring-color | Focus ring color |
--s-focus-ring-offset | Focus ring offset |
--s-background | Background |
--s-text | Text |
--s-shadow-sm | Shadow sm |