Tabs

Layered sections of content displayed one at a time.

Manage your account.

Installation

Add the tabs component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/tabs.json

Usage

tsx

import { Tabs } from "@/components/ui/tabs"

Examples

Line variant

Underlined tabs

Overview panel.

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

<Tabs defaultValue="overview" className="w-72">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel.</TabsContent>
  <TabsContent value="activity">Activity panel.</TabsContent>
  <TabsContent value="settings">Settings panel.</TabsContent>
</Tabs>