Tabs
A roving-focus tab list and the panels it switches
Profile — the name, avatar and timezone of the current account. Changes apply to every project.
Installation
npx shadcn@latest add @sudokw/components-tabsimport { Tabs } from "@gpuixui/components";Usage
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@gpuixui/components/tabs";
<Tabs defaultValue="profile">
<TabsList label="Account settings">
<TabsTrigger value="profile">Profile</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<TabsContent value="profile">…</TabsContent>
<TabsContent value="notifications">…</TabsContent>
</Tabs>;Composition
Tabs
├── TabsList
│ └── TabsTrigger
└── TabsContentAPI reference
Tabs
| Prop | Type | Default |
|---|---|---|
value | string | uncontrolled |
defaultValue | string | "" — no tab selected |
onValueChange | (value: string) => void | none |
orientation | "horizontal" | "vertical" | "horizontal" — a stored name the union does not carry |
activation | "automatic" | "manual" | "automatic" — a stored name the union does not carry |
className | string | — |
children | parts — TabsList, TabsContent | — |
TabsList
| Prop | Type | Default |
|---|---|---|
label | string | none |
variant | "pill" | "line" | "pill"; "line" draws a thin bar under the chosen tab |
className | string | — |
children | parts — TabsTrigger | — |
TabsTrigger
| Prop | Type | Default |
|---|---|---|
value | string (required) | none |
disabled | boolean | false |
style | StyleDesc | (state) => StyleDesc | none |
className | string | — |
Keyboard
- Arrow LeftArrow RightArrow UpArrow DownCtrl+NCtrl+P
- moves along the rail's axis
- HomeEnd
- the first or last tab
- EnterSpace
- selects the focused tab with `activation="manual"`
read from tabs.tsx
Edit this page on GitHubapps/docs/content/docs/components/tabs.mdx