Tabs

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

<Tabs defaultValue="tab-1" class="w-full max-w-sm">
  <TabsList class="grid w-full grid-cols-2">
    <TabsTrigger value="tab-1">Account</TabsTrigger>
    <TabsTrigger value="tab-2">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Account</h3>
      <p class="text-muted-foreground text-sm">
        Make changes to your account here. Click save when you're done.
      </p>
    </div>
  </TabsContent>
  <TabsContent value="tab-2">
    <div class="rounded-md border p-4">
      <h3 class="mb-2 font-semibold">Password</h3>
      <p class="text-muted-foreground text-sm">
        Change your password here. You will be logged out after changing your
        password.
      </p>
    </div>
  </TabsContent>
</Tabs>

Installation

To install the tabs component, run the following command:

npx shadcn@latest add @fulldev/tabs

Usage

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

<Tabs defaultValue="tab-1">
  <TabsList>
    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1"> Content for tab 1 </TabsContent>
  <TabsContent value="tab-2"> Content for tab 2 </TabsContent>
</Tabs>