Tabs

The Tabs component provides a structured way to organize and display content in a layered format, where multiple sections (tab panels) are available, but only one is visible to the user at any given moment.

Docs API Reference

Account

Make changes to your account here. Click save when you're done.

Name

Username

Setting Up the Tabs Component

npx shadcn@latest add tabs

Implementing the Tabs Component

  Tabs, // The main container for the tabs component
  TabsContent, // Contains the content for a specific tab panel
  TabsList, // A container for the tab triggers
  TabsTrigger, // An interactive element that activates a tab panel
} from "@/components/ui/tabs";

<Tabs defaultValue="account" className="w-[400px]">
  <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>

Table Textarea