Skip to content
fulldev/ui
X GitHub

Tabs

 
---
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} 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="font-semibold mb-2">Account</h3>
      <p class="text-sm text-muted-foreground">
        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="font-semibold mb-2">Password</h3>
      <p class="text-sm text-muted-foreground">
        Change your password here. You will be logged out after changing your password.
      </p>
    </div>
  </TabsContent>
</Tabs>

Installation

Section titled “Installation”

To install the tabs component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/tabs

Usage

Section titled “Usage”
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} 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>