Stalk UI

Component

Tabs

Organizes related content into selectable panels.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/tabs

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel.</TabsContent>
  <TabsContent value="analytics">Analytics panel.</TabsContent>
  <TabsContent value="settings">Settings panel.</TabsContent>
</Tabs>
Theme
<Tabs defaultValue="a" variant="segmented" fitted>
  <TabsList>
    <TabsTrigger value="a">Day</TabsTrigger>
    <TabsTrigger value="b">Week</TabsTrigger>
    <TabsTrigger value="c">Month</TabsTrigger>
  </TabsList>
  <TabsContent value="a">Day view.</TabsContent>
  <TabsContent value="b">Week view.</TabsContent>
  <TabsContent value="c">Month view.</TabsContent>
</Tabs>
Theme
<Tabs defaultValue="a" variant="pills">
  <TabsList>
    <TabsTrigger value="a">All</TabsTrigger>
    <TabsTrigger value="b">Open</TabsTrigger>
    <TabsTrigger value="c">Closed</TabsTrigger>
  </TabsList>
  <TabsContent value="a">All issues.</TabsContent>
  <TabsContent value="b">Open issues.</TabsContent>
  <TabsContent value="c">Closed issues.</TabsContent>
</Tabs>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`fitted``boolean`No-Stretch the trigger list to fill the row and split available space evenly.
`size``TabsSize`No--
`tone``TabsTone`No-Selects the semantic color palette used for the active indicator.
`variant``TabsVariant`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`
`variant``line`, `segmented`, `pills`
`fitted``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/tabs.json`
  • Recipe: `tabs`
  • Files: `src/components/ui/tabs.tsx`