All componentslineenclosedoutlinepillsghostxssmmdlg
Tabs
Switch between panels with line, enclosed, outline, pills, and ghost tab lists.
Variants
Sizes
Install
zsh — tabs
1bunx stylexblocks add tabsUsage — Base UI
tabs.tsx
12345678910111213141516171819import { Tabs } from "#components/ui/base-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.Tab value="overview">Overview</Tabs.Tab> <Tabs.Tab value="members">Members</Tabs.Tab> </Tabs.List> <Tabs.Panel value="overview">…</Tabs.Panel> <Tabs.Panel value="members">…</Tabs.Panel> </Tabs.Root> );}
// controlled: <Tabs.Root value={value} onValueChange={setValue}>// composition per part via render