Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/tabs.json

Usage

Use for switching between related views. Matches tab value to panel value.

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

export function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Make changes to your account here.
      </TabsContent>
      <TabsContent value="password">Change your password here.</TabsContent>
    </Tabs>
  );
}

Set TabsList variant to line for an underline style. Pass orientation="vertical" on Tabs for a vertical list. Built on Base UI Tabs.