Yami

Tabs

Layered sections of content displayed one at a time.

Manage your account.

Installation

Add the tabs component with the shadcn CLI.

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

Usage

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

<Tabs defaultValue="account" className="w-72">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Manage your account.</TabsContent>
  <TabsContent value="password">Change your password.</TabsContent>
</Tabs>

Examples

Line variant

Underlined tabs
Overview panel.

Code

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>