Tabs

Basic usage

Each <TabsTrigger> is paired with a <TabsContent> by value. The first non-disabled trigger is active by default.

<Tabs>
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue</TabsTrigger>
    <TabsTrigger value="svelte">Svelte</TabsTrigger>
  </TabsList>
  <TabsContent value="react">
    React uses JSX for templating.
  </TabsContent>
  <TabsContent value="vue">
    Vue uses single-file components with template syntax.
  </TabsContent>
  <TabsContent value="svelte">
    Svelte compiles components at build time.
  </TabsContent>
</Tabs>

Default tab

Set defaultValue on the parent <Tabs> to pick the initially active tab. If omitted, the first non-disabled trigger wins.

<Tabs defaultValue="vue">
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue (default)</TabsTrigger>
  </TabsList>
  <TabsContent value="react">React content</TabsContent>
  <TabsContent value="vue">Vue content</TabsContent>
</Tabs>

Tab icons

Add a Lucide icon to a trigger with the icon prop:

<Tabs>
  <TabsList>
    <TabsTrigger value="macos" icon="cpu">macOS</TabsTrigger>
    <TabsTrigger value="linux" icon="terminal">Linux</TabsTrigger>
    <TabsTrigger value="windows" icon="package">Windows</TabsTrigger>
  </TabsList>
  <TabsContent value="macos">
    Install via Homebrew: `brew install codivdocs`
  </TabsContent>
  <TabsContent value="linux">
    Install via apt or yum.
  </TabsContent>
  <TabsContent value="windows">
    Install via Chocolatey or winget.
  </TabsContent>
</Tabs>

Disabled triggers

Mark a trigger as disabled for "coming soon" tabs. Disabled triggers can't be clicked and visually fade.

<Tabs>
  <TabsList>
    <TabsTrigger value="rest">REST API</TabsTrigger>
    <TabsTrigger value="graphql">GraphQL</TabsTrigger>
    <TabsTrigger value="grpc" disabled>gRPC (soon)</TabsTrigger>
  </TabsList>
  <TabsContent value="rest">REST is GA today.</TabsContent>
  <TabsContent value="graphql">GraphQL is GA today.</TabsContent>
  <TabsContent value="grpc">gRPC is in private beta.</TabsContent>
</Tabs>

Differences from CodeGroup

For code-only switching (like the same install command in npm/yarn/pnpm), use <CodeGroup> instead. It's shorter, the tab bar is styled like a code block header, and the active tab inherits the code block syntax highlighting.

<Tabs> is for mixed content — prose, images, components, or anything that isn't just code.

Props

Tabs

TabsList

TabsTrigger

TabsContent