Skip to content
Navigation

Tabs

Switches between views of the same thing.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@flinbu/seed";

Line, with counts

Every token in Light and Dark.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@flinbu/seed";

<Tabs defaultValue="all" className="w-full max-w-lg">
  <TabsList aria-label="Token views">
    <TabsTrigger value="all" count={446}>All</TabsTrigger>
    <TabsTrigger value="semantic" count={148}>Semantic</TabsTrigger>
    <TabsTrigger value="primitives">Primitives</TabsTrigger>
  </TabsList>
  <TabsContent value="all" className="text-secondary body-body-3-regular">Every token in Light and Dark.</TabsContent>
  <TabsContent value="semantic" className="text-secondary body-body-3-regular">Tokens that switch with the theme.</TabsContent>
  <TabsContent value="primitives" className="text-secondary body-body-3-regular">Raw scales for charts and illustration.</TabsContent>
</Tabs>

Pill

The live component.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@flinbu/seed";

<Tabs defaultValue="preview">
  <TabsList variant="pill" aria-label="View">
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview" className="text-secondary body-body-3-regular">The live component.</TabsContent>
  <TabsContent value="code" className="text-secondary body-body-3-regular">Its source.</TabsContent>
</Tabs>

Use it for

  • line under a page's sections; pill for small views like Preview and Code.

Use something else for

  • Pages: use links.
  • Filters: use ToggleGroup.

Props

PropTypeDefaultDescription
value / defaultValuestring–Active tab.
onValueChange(value: string) => void–Called on change.
TabsList: variant'line''pill''line'Underline or segmented control.
TabsList: fullWidthboolean–Tabs share the width.
TabsTrigger: iconIconProp–Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
TabsTrigger: countReactNode–A count after the label.

Accessibility

  • Built on Radix Tabs: arrow keys move between tabs, Tab moves into the panel.