GitHub

Go to...

Choose a page to open.

Displays one panel of content at a time, selected by a tab.

Tabs

tabs-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/tabs.json

Usage

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="usage">Usage</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel</TabsContent>
  <TabsContent value="usage">Usage panel</TabsContent>
</Tabs>

Examples

Line

Set variant="line" on TabsList to mark the active tab with a line.

tabs-line

Vertical

Set orientation="vertical" on Tabs to stack the tabs.

tabs-vertical