Swaps between sibling panels without leaving the page.
import { Tabs } from "@/fragments/ui";Source<Tabs defaultValue="overview" variant="ghost">
<Tabs.List>
<Tabs.Tab value="overview">Overview</Tabs.Tab>
<Tabs.Tab value="analytics">Analytics</Tabs.Tab>
<Tabs.Tab value="settings">Settings</Tabs.Tab>
</Tabs.List>npx @usefragments/cli add tabsWrites src/fragments/ui/components/Tabs plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Tabs is a compound: import the root and reach its parts through dot notation.
Tabs.ListTabs.TabTabs.PanelA rule tracks the active panel.
<Tabs defaultValue="overview" variant="ghost">
<Tabs.List>
<Tabs.Tab value="overview">Overview</Tabs.Tab>
<Tabs.Tab value="analytics">Analytics</Tabs.Tab>
<Tabs.Tab value="settings">Settings</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="overview">
<p>Overview content goes here.</p>
</Tabs.Panel>
<Tabs.Panel value="analytics">
<p>Analytics content goes here.</p>
</Tabs.Panel>
<Tabs.Panel value="settings">
<p>Settings content goes here.</p>
</Tabs.Panel>
</Tabs>An unavailable panel stays visible but unreachable.
<Tabs defaultValue="general" variant="ghost">
<Tabs.List>
<Tabs.Tab value="general">General</Tabs.Tab>
<Tabs.Tab value="security">Security</Tabs.Tab>
<Tabs.Tab value="billing" disabled>Billing</Tabs.Tab>
</Tabs.List>One list can opt out of the root's style.
<Tabs defaultValue="overview" variant="soft">
<Tabs.List variant="ghost">
<Tabs.Tab value="overview">Overview</Tabs.Tab>
<Tabs.Tab value="activity">Activity</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="overview">Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Tab list and panels (use Tabs.List, Tabs.Tab, Tabs.Panel) |
defaultValue | string | Not set | Initially active tab (uncontrolled) |
value | string | Not set | Controlled active tab value |
onValueChange | function | Not set | Called when active tab changes |
orientation | enumhorizontalvertical | horizontal | Tab list orientation |
variant | enumghostsoft | ghost | Default chrome for Tabs.List (can be overridden on Tabs.List): ghost draws a rule under the active tab, soft is a filled rail with a selected segment |
size | enumsmmdlg | Not set | Tab control size. Defaults to the component-default control size. |