Tabs

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

shadcn/ui docs →

Preview

Account
Make changes to your account here.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/tabs.json

Dependencies: @radix-ui/react-tabs

Usage

example.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="account" className="w-full max-w-sm">
  <TabsList className="w-full">
    <TabsTrigger className="flex-1" value="account">Account</TabsTrigger>
    <TabsTrigger className="flex-1" value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p className="text-sm text-muted-foreground p-4">
      Make changes to your account here.
    </p>
  </TabsContent>
  <TabsContent value="password">
    <p className="text-sm text-muted-foreground p-4">
      Change your password here.
    </p>
  </TabsContent>
</Tabs>
0