Tabs

Tabbed content with built-in state management and ARIA tablist/tab/tabpanel roles.

Usage

tsx

1import { Tabs, TabsList, TabsTrigger, TabsContent } from '@storm-ds/ui'
2
3<Tabs defaultValue="tab1">
4  <TabsList>
5    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
6    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
7  </TabsList>
8  <TabsContent value="tab1">Content 1</TabsContent>
9  <TabsContent value="tab2">Content 2</TabsContent>
10</Tabs>

Default

Overview content goes here.

Full Width

Content for tab 1

tsx

1<Tabs defaultValue="overview">
2  <TabsList fullWidth>
3    <TabsTrigger value="overview">Overview</TabsTrigger>
4    <TabsTrigger value="settings">Settings</TabsTrigger>
5    <TabsTrigger value="members">Members</TabsTrigger>
6  </TabsList>
7  <TabsContent value="overview">Overview content</TabsContent>
8  <TabsContent value="settings">Settings content</TabsContent>
9  <TabsContent value="members">Members content</TabsContent>
10</Tabs>

Disabled

Active tab content.

Note

Tabs manages active state internally via defaultValue. Each TabsTrigger and TabsContent must have a matching value prop.

Props

Prop	Type	Default	Description
defaultValue	string	-	Initial active tab value (Tabs)
value	string	-	Tab identifier (TabsTrigger, TabsContent)
fullWidth	boolean	false	Stretches tabs to fill container width (TabsList)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Tabs. Import: `import { Tabs, TabsList, TabsTrigger, TabsContent } from '@storm-ds/ui'`. Tabs manages state internally via defaultValue. Each TabsTrigger and TabsContent must have a matching value prop. Use fullWidth on TabsList to stretch tabs. Use disabled on TabsTrigger to disable tabs. Example: `<Tabs defaultValue="tab1"><TabsList><TabsTrigger value="tab1">Tab 1</TabsTrigger><TabsTrigger value="tab2">Tab 2</TabsTrigger></TabsList><TabsContent value="tab1">Content 1</TabsContent><TabsContent value="tab2">Content 2</TabsContent></Tabs>`

ContextMenu

Toast