Tabs

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

Account

Change your name. Click save when you're done.

Name

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-sm">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="billing">Billing</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Change your name. Click save when you&apos;re done.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-1.5">
            <Label htmlFor="tabs-name">Name</Label>
            <Input id="tabs-name" defaultValue="Ada Lovelace" />
          </CardContent>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              You&apos;ll be signed out on other devices.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-1.5">
            <Label htmlFor="tabs-password">New password</Label>
            <Input id="tabs-password" type="password" />
          </CardContent>
          <CardFooter>
            <Button>Update password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="billing">
        <Card>
          <CardHeader>
            <CardTitle>Billing</CardTitle>
            <CardDescription>You&apos;re on the free plan.</CardDescription>
          </CardHeader>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/tabs.json

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } 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>

Examples

Icons and a disabled tab

import { CodeIcon, LayoutGridIcon, ListIcon } from "lucide-react"

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

export function TabsIcons() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tabs defaultValue="grid">
        <TabsList>
          <TabsTrigger value="grid">
            <LayoutGridIcon data-icon="inline-start" />
            Grid
          </TabsTrigger>
          <TabsTrigger value="list">
            <ListIcon data-icon="inline-start" />
            List
          </TabsTrigger>
          <TabsTrigger value="code" disabled>
            <CodeIcon data-icon="inline-start" />
            Code
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="grid">
        <TabsList>
          <TabsTrigger value="grid" aria-label="Grid">
            <LayoutGridIcon />
          </TabsTrigger>
          <TabsTrigger value="list" aria-label="List">
            <ListIcon />
          </TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}

Line

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

export function TabsLine() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-sm">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">
          Activity
          <Badge variant="secondary">3</Badge>
        </TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </Tabs>
  )
}

Vertical

import { AppWindowIcon, SettingsIcon, UserIcon } from "lucide-react"

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

export function TabsVertical() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tabs defaultValue="profile" orientation="vertical">
        <TabsList>
          <TabsTrigger value="profile">
            <UserIcon data-icon="inline-start" />
            Profile
          </TabsTrigger>
          <TabsTrigger value="apps">
            <AppWindowIcon data-icon="inline-start" />
            Apps
          </TabsTrigger>
          <TabsTrigger value="settings">
            <SettingsIcon data-icon="inline-start" />
            Settings
          </TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="profile" orientation="vertical">
        <TabsList variant="line">
          <TabsTrigger value="profile">Profile</TabsTrigger>
          <TabsTrigger value="apps">Apps</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  )
}