Tabs

Layered sections of content with a sliding indicator.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

render(
  <Tabs defaultValue="preview" className="w-full max-w-sm">
    <TabsList className="w-full">
      <TabsTrigger value="preview" className="flex-1">Preview</TabsTrigger>
      <TabsTrigger value="code" className="flex-1">Code</TabsTrigger>
      <TabsTrigger value="docs" className="flex-1">Docs</TabsTrigger>
    </TabsList>
    <TabsContent value="preview" className="text-sm text-muted">A live preview of the component.</TabsContent>
    <TabsContent value="code" className="text-sm text-muted">The copy-paste source.</TabsContent>
    <TabsContent value="docs" className="text-sm text-muted">The full API reference.</TabsContent>
  </Tabs>
)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/tabs

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import Tabs from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.