Tabs

Switches between views of the same content.

Installation

$ npx shadcn@latest add @constella/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">…</TabsContent>
  <TabsContent value="code">…</TabsContent>
</Tabs>

API Reference

TabsList renders the indicator that slides to the active tab, and switches tabs as the arrow keys move focus; pass activateOnFocus={false} to switch on Enter instead. Every part takes sx, applied last. For the rest, see Base UI Tabs.