All componentslineenclosedoutlinepillsghostxssmmdlg
Tabs
Switch between panels with line, enclosed, outline, pills, and ghost tab lists.
Variants
Sizes
Install
zsh — tabs
1bunx stylexblocks add tabsUsage — Ark UI
tabs.tsx
12345678910111213141516171819import { Tabs } from "#components/ui/ark-ui/tabs.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — selection, roving focus, and keyboard come from the machine <Tabs.Root defaultValue="overview" variant="line" size="md"> <Tabs.List> <Tabs.Trigger value="overview">Overview</Tabs.Trigger> <Tabs.Trigger value="members">Members</Tabs.Trigger> </Tabs.List> <Tabs.Content value="overview">…</Tabs.Content> <Tabs.Content value="members">…</Tabs.Content> </Tabs.Root> );}
// controlled: <Tabs.Root value={value} onValueChange={(d) => setValue(d.value)}>// composition per part via asChild