Tabs

Navigation

Splits related content into switchable panels.

npx shadcn@latest add tabs

Default

Preview

Live

Track active projects, deployments, and team members in one place.

tsx

1<Tabs defaultValue="overview">
2  <TabsList>
3    <TabsTrigger value="overview">Overview</TabsTrigger>
4    <TabsTrigger value="usage">Usage</TabsTrigger>
5    <TabsTrigger value="limits">Limits</TabsTrigger>
6  </TabsList>
7  <TabsContent value="overview">
8    <p>Panel content goes here.</p>
9  </TabsContent>
10</Tabs>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	string	The controlled value of the active tab.
defaultValue	string	The initially active tab.