Tabs

A set of layered sections of content displayed one at a time.

Make changes to your account here.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/tabs.json

Usage

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

<Tabs className="w-full max-w-md" defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Make changes to your account here.
  </TabsContent>
  <TabsContent value="password">
    Change your password here.
  </TabsContent>
  <TabsContent value="team">
    Invite and manage your teammates.
  </TabsContent>
</Tabs>