Tabs

Overview

Activity

Analytics

Settings

Production is healthy. The last deployment finished 12 minutes ago with no errors.

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const panels = [
  {
    id: "overview",
    title: "Overview",
    body: "Production is healthy. The last deployment finished 12 minutes ago with no errors.",
  },
  {
    id: "activity",
    title: "Activity",
    body: "148 deployments this month. A preview is created for every pull request.",
  },
  {
    id: "analytics",
    title: "Analytics",
    body: "32.4k visitors in the last 7 days, up 8% from the week before.",
  },
  {
    id: "settings",
    title: "Settings",
    body: "Manage domains, environment variables and build settings.",
  },
];

export default function TabsDemo() {
  return (
    <Tabs className="w-full max-w-md">
      <TabList aria-label="Project">
        {panels.map((p) => (
          <Tab key={p.id} id={p.id}>
            {p.title}
          </Tab>
        ))}
      </TabList>
      {panels.map((p) => (
        <TabPanel key={p.id} id={p.id} className="text-muted-foreground">
          {p.body}
        </TabPanel>
      ))}
    </Tabs>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/tabs

The CLI installs dependencies and any other components this one uses.

Usage

tsx

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

tsx

<Tabs>
  <TabList aria-label="Account">
    <Tab id="profile">Profile</Tab>
    <Tab id="billing">Billing</Tab>
  </TabList>
  <TabPanel id="profile">…</TabPanel>
  <TabPanel id="billing">…</TabPanel>
</Tabs>

Each Tab is matched to the TabPanel with the same id. Only the selected panel is mounted. The first tab is selected by default; use defaultSelectedKey or selectedKey to change that.

Label the tab list

TabList renders role="tablist" and needs an accessible name. Pass aria-label, or aria-labelledby pointing at a visible heading.

When to use

Tabs — switch between peer views of the same object (a project's overview, deployments and settings) where only one view is needed at a time.
Toggle Button Group — pick a value or mode that changes content in place without panels, such as a chart's metric. Segmented tabs look similar; use tabs only when each option has its own panel.
Disclosure — sections that users may want open at the same time, or content that should stay in reading order.
Sidebar or Links — primary navigation between pages. Tabs can be links (see Tabs as links), but keep them to a small set of sibling routes.

Anatomy

tsx

<Tabs>                    {/* state, orientation, variant and size */}
  <TabList>               {/* role="tablist" */}
    <Tab>                 {/* role="tab", or a link when href is set */}
      <Icon />            {/* optional, auto-sized */}
      Label
      <Badge />           {/* optional count or status */}
    </Tab>
  </TabList>
  <TabPanel />            {/* role="tabpanel", one per tab */}
</Tabs>

Part	Renders	Notes
`Tabs`	`<div>`	Root. Holds selection state and passes `variant` and `size` to its parts through context. A column when horizontal, a row when vertical.
`TabList`	`<div role="tablist">`	The row (or column) of tabs. One tab stop; arrow keys move between tabs.
`Tab`	`<div role="tab">` or `<a>`	A tab. Needs an `id` that matches a panel. Renders a link when given `href`.
Selection indicator	`SelectionIndicator`	Rendered inside every tab. Only the selected tab's indicator shows; it slides between tabs. Hidden for `enclosed`.
`TabPanel`	`<div role="tabpanel">`	Content for the tab with the same `id`. Labelled by its tab.

Examples

Segmented

A pill-shaped track with a raised thumb. Suits short, mutually exclusive views such as billing periods or chart ranges, and fits inside toolbars and card headers.

Monthly

Yearly

$12 per seat, billed monthly.

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

export default function TabsSegmented() {
  return (
    <Tabs variant="segmented" className="w-full max-w-md">
      <TabList aria-label="Billing period">
        <Tab id="monthly">Monthly</Tab>
        <Tab id="yearly">Yearly</Tab>
      </TabList>
      <TabPanel id="monthly" className="text-muted-foreground">
        $12 per seat, billed monthly.
      </TabPanel>
      <TabPanel id="yearly" className="text-muted-foreground">
        $10 per seat, billed yearly. Save 17%.
      </TabPanel>
    </Tabs>
  );
}

Enclosed

Folder-style tabs that join the panel below. Give the panel a border without a top edge (border border-t-0) and remove the root gap (gap-0) so they connect. Good for editors and code samples.

page.tsx

layout.tsx

globals.css

export default function Page() {
  return <h1>Hello, world</h1>;
}

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const files = [
  {
    id: "page",
    name: "page.tsx",
    code: "export default function Page() {\n  return <h1>Hello, world</h1>;\n}",
  },
  {
    id: "layout",
    name: "layout.tsx",
    code: 'export default function Layout({ children }) {\n  return <html lang="en"><body>{children}</body></html>;\n}',
  },
  {
    id: "css",
    name: "globals.css",
    code: '@import "tailwindcss";\n\nbody {\n  font-family: var(--font-sans);\n}',
  },
];

export default function TabsEnclosed() {
  return (
    <Tabs variant="enclosed" className="w-full max-w-md gap-0">
      <TabList aria-label="Open files">
        {files.map((f) => (
          <Tab key={f.id} id={f.id} className="font-mono text-xs">
            {f.name}
          </Tab>
        ))}
      </TabList>
      {files.map((f) => (
        <TabPanel
          key={f.id}
          id={f.id}
          className="rounded-t-none border border-t-0 bg-background p-4"
        >
          <pre className="overflow-x-auto font-mono text-foreground text-xs leading-relaxed">
            {f.code}
          </pre>
        </TabPanel>
      ))}
    </Tabs>
  );
}

Sizes

md (default) and sm for every variant. Use sm in dense surfaces like card headers, toolbars and side panels.

Day

Week

Month

Day

Week

Month

Day

Week

Month

Day

Week

Month

Day

Week

Month

Day

Week

Month

import { Tab, TabList, Tabs } from "@/components/ui/tabs";

const variants = ["line", "segmented", "enclosed"] as const;
const sizes = ["sm", "md"] as const;

export default function TabsSizes() {
  return (
    <div className="grid w-full max-w-md gap-6">
      {variants.map((variant) =>
        sizes.map((size) => (
          <Tabs key={`${variant}-${size}`} variant={variant} size={size}>
            <TabList aria-label={`${variant} ${size}`}>
              <Tab id="day">Day</Tab>
              <Tab id="week">Week</Tab>
              <Tab id="month">Month</Tab>
            </TabList>
          </Tabs>
        )),
      )}
    </div>
  );
}

With icons

Put a Lucide icon before the label. Icons are sized to 16px automatically unless you set a size-* class.

Profile

Security

Billing

Your name, avatar and public profile.

import { CreditCardIcon, ShieldIcon, UserIcon } from "lucide-react";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const tabs = [
  {
    id: "profile",
    label: "Profile",
    icon: UserIcon,
    body: "Your name, avatar and public profile.",
  },
  {
    id: "security",
    label: "Security",
    icon: ShieldIcon,
    body: "Password, passkeys and two-factor authentication.",
  },
  {
    id: "billing",
    label: "Billing",
    icon: CreditCardIcon,
    body: "Plan, invoices and payment methods.",
  },
];

export default function TabsIcons() {
  return (
    <Tabs className="w-full max-w-lg">
      <TabList aria-label="Account settings">
        {tabs.map((t) => (
          <Tab key={t.id} id={t.id}>
            <t.icon /> {t.label}
          </Tab>
        ))}
      </TabList>
      {tabs.map((t) => (
        <TabPanel key={t.id} id={t.id} className="text-muted-foreground">
          {t.body}
        </TabPanel>
      ))}
    </Tabs>
  );
}

Icon only

Tabs without visible text need an aria-label on each Tab. A small segmented list works well as a view switcher.

import { KanbanIcon, LayoutGridIcon, ListIcon } from "lucide-react";
import { Tab, TabList, Tabs } from "@/components/ui/tabs";

export default function TabsIconOnly() {
  return (
    <Tabs variant="segmented" size="sm" defaultSelectedKey="board">
      <TabList aria-label="View">
        <Tab id="list" aria-label="List view">
          <ListIcon />
        </Tab>
        <Tab id="board" aria-label="Board view">
          <KanbanIcon />
        </Tab>
        <Tab id="grid" aria-label="Grid view">
          <LayoutGridIcon />
        </Tab>
      </TabList>
    </Tabs>
  );
}

With badges

Counts and statuses are plain children. Use a small Badge so the tab height doesn't change.

Open24

In review6

Closed1,284

24 open pull requests.

import { Badge } from "@/components/ui/badge";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const tabs = [
  { id: "open", label: "Open", count: 24 },
  { id: "in-review", label: "In review", count: 6 },
  { id: "closed", label: "Closed", count: 1284 },
];

export default function TabsBadges() {
  return (
    <Tabs className="w-full max-w-md">
      <TabList aria-label="Pull requests">
        {tabs.map((t) => (
          <Tab key={t.id} id={t.id}>
            {t.label}
            <Badge size="sm" shape="pill">
              {t.count.toLocaleString()}
            </Badge>
          </Tab>
        ))}
      </TabList>
      {tabs.map((t) => (
        <TabPanel key={t.id} id={t.id} className="text-muted-foreground">
          {t.count.toLocaleString()} {t.label.toLowerCase()} pull requests.
        </TabPanel>
      ))}
    </Tabs>
  );
}

Tabs don't wrap or shrink. A horizontal TabList watches its size, and when the tabs are wider than the space it has (many tabs, long labels, small screens) it gets data-overflowing and scrolls horizontally, with no vertical scrollbar and the indicator kept inside the scroll area. The selected tab is scrolled into view on mount and whenever the selection changes; tabs reached with the arrow keys scroll into view as they get focus. Pass hideScrollbar to hide the (thin) scrollbar; the list still scrolls with touch, a trackpad, Shift+wheel and the arrow keys.

The list is capped at its container's width (max-w-full, min-w-0), so this also works when the TabList sits in a flex row next to other controls. Lists that fit are left as they are.

General

Members

Billing

Domains

Integrations

Webhooks

Security

Audit log

Security settings for the Acme workspace.

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const sections = [
  "General",
  "Members",
  "Billing",
  "Domains",
  "Integrations",
  "Webhooks",
  "Security",
  "Audit log",
];

export default function TabsScrollable() {
  return (
    <Tabs className="w-full max-w-sm" defaultSelectedKey="Security">
      <TabList aria-label="Workspace settings">
        {sections.map((s) => (
          <Tab key={s} id={s}>
            {s}
          </Tab>
        ))}
      </TabList>
      {sections.map((s) => (
        <TabPanel key={s} id={s} className="text-muted-foreground">
          {s} settings for the Acme workspace.
        </TabPanel>
      ))}
    </Tabs>
  );
}

Vertical

orientation="vertical" stacks the tabs beside the panel, and adds up and down arrow navigation. Give the TabList a fixed width. Useful for settings pages with many sections.

General

Security

Integrations

Billing

General workspace settings.

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

export default function TabsVertical() {
  return (
    <Tabs orientation="vertical" className="w-full max-w-md">
      <TabList aria-label="Settings" className="w-36">
        <Tab id="general">General</Tab>
        <Tab id="security">Security</Tab>
        <Tab id="integrations">Integrations</Tab>
        <Tab id="billing">Billing</Tab>
      </TabList>
      <TabPanel id="general" className="text-muted-foreground">
        General workspace settings.
      </TabPanel>
      <TabPanel id="security" className="text-muted-foreground">
        SSO, 2FA and session policies.
      </TabPanel>
      <TabPanel id="integrations" className="text-muted-foreground">
        Connected apps and webhooks.
      </TabPanel>
      <TabPanel id="billing" className="text-muted-foreground">
        Plan, invoices and payment methods.
      </TabPanel>
    </Tabs>
  );
}

Disabled

Disable individual tabs with disabledKeys on Tabs or isDisabled on a Tab, or every tab with isDisabled on Tabs. Disabled tabs are skipped by the keyboard. Tell users why a tab is unavailable, for example with an icon or a note in the page.

Members

Roles

Audit log

12 members across 3 teams.

import { LockIcon } from "lucide-react";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

export default function TabsDisabled() {
  return (
    <Tabs className="w-full max-w-md" disabledKeys={["audit-log"]}>
      <TabList aria-label="Workspace">
        <Tab id="members">Members</Tab>
        <Tab id="roles">Roles</Tab>
        <Tab id="audit-log">
          <LockIcon /> Audit log
        </Tab>
      </TabList>
      <TabPanel id="members" className="text-muted-foreground">
        12 members across 3 teams.
      </TabPanel>
      <TabPanel id="roles" className="text-muted-foreground">
        Owner, Admin, Member and Viewer.
      </TabPanel>
      <TabPanel id="audit-log" className="text-muted-foreground">
        Audit logs are available on the Enterprise plan.
      </TabPanel>
    </Tabs>
  );
}

Controlled

Own the selection with selectedKey and onSelectionChange when something outside the tabs needs to change it, such as Back and Continue buttons in a multi-step flow.

Details

Repository

Environment

Name your project and pick a region.

import { useState } from "react";
import type { Key } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const steps = [
  {
    id: "details",
    label: "Details",
    body: "Name your project and pick a region.",
  },
  {
    id: "repository",
    label: "Repository",
    body: "Connect a Git repository to deploy from.",
  },
  {
    id: "environment",
    label: "Environment",
    body: "Add the environment variables your build needs.",
  },
];

export default function TabsControlled() {
  const [selected, setSelected] = useState<Key>("details");
  const index = steps.findIndex((s) => s.id === selected);

  return (
    <div className="grid w-full max-w-md gap-4">
      <Tabs selectedKey={selected} onSelectionChange={setSelected}>
        <TabList aria-label="New project">
          {steps.map((s) => (
            <Tab key={s.id} id={s.id}>
              {s.label}
            </Tab>
          ))}
        </TabList>
        {steps.map((s) => (
          <TabPanel key={s.id} id={s.id} className="text-muted-foreground">
            {s.body}
          </TabPanel>
        ))}
      </Tabs>
      <div className="flex justify-between">
        <Button
          variant="outline"
          isDisabled={index === 0}
          onPress={() => setSelected(steps[index - 1].id)}
        >
          Back
        </Button>
        <Button
          isDisabled={index === steps.length - 1}
          onPress={() => setSelected(steps[index + 1].id)}
        >
          Continue
        </Button>
      </div>
    </div>
  );
}

Manual activation

By default, moving focus with the arrow keys selects the tab immediately. With keyboardActivation="manual", arrows only move focus and Enter or Space selects. Use this when rendering a panel is expensive, for example when it fetches data.

Revenue

Churn

Cohorts

$184,200 this quarter across 1,240 invoices.

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const reports = [
  {
    id: "revenue",
    label: "Revenue",
    body: "$184,200 this quarter across 1,240 invoices.",
  },
  {
    id: "churn",
    label: "Churn",
    body: "2.1% monthly churn, down from 2.6% last quarter.",
  },
  {
    id: "cohorts",
    label: "Cohorts",
    body: "Retention by signup month for the last 12 months.",
  },
];

export default function TabsManualActivation() {
  return (
    <Tabs keyboardActivation="manual" className="w-full max-w-md">
      <TabList aria-label="Reports">
        {reports.map((r) => (
          <Tab key={r.id} id={r.id}>
            {r.label}
          </Tab>
        ))}
      </TabList>
      {reports.map((r) => (
        <TabPanel key={r.id} id={r.id} className="text-muted-foreground">
          {r.body}
        </TabPanel>
      ))}
    </Tabs>
  );
}

Dynamic tabs

Pass items to TabList with a render function, and map the same array to panels. Here a controlled selectedKey jumps to each new tab as it's added.

Active users

Top plans

select count(*) from users where active;

import { PlusIcon } from "lucide-react";
import { useState } from "react";
import type { Key } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

interface Query {
  id: string;
  name: string;
  sql: string;
}

export default function TabsDynamic() {
  const [queries, setQueries] = useState<Query[]>([
    {
      id: "q1",
      name: "Active users",
      sql: "select count(*) from users where active;",
    },
    {
      id: "q2",
      name: "Top plans",
      sql: "select plan, count(*) from subscriptions group by plan;",
    },
  ]);
  const [selected, setSelected] = useState<Key>("q1");

  function addQuery() {
    const id = `q${queries.length + 1}`;
    setQueries([
      ...queries,
      { id, name: `Untitled ${queries.length + 1}`, sql: "select 1;" },
    ]);
    setSelected(id);
  }

  return (
    <Tabs
      variant="enclosed"
      size="sm"
      selectedKey={selected}
      onSelectionChange={setSelected}
      className="w-full max-w-md gap-0"
    >
      <div className="flex items-end gap-1 border-b">
        <TabList aria-label="Queries" items={queries} className="border-b-0">
          {(q) => <Tab id={q.id}>{q.name}</Tab>}
        </TabList>
        <Button
          variant="ghost"
          size="icon-xs"
          aria-label="New query"
          className="mb-1"
          onPress={addQuery}
        >
          <PlusIcon />
        </Button>
      </div>
      {queries.map((q) => (
        <TabPanel
          key={q.id}
          id={q.id}
          className="rounded-t-none border border-t-0 p-4 font-mono text-xs"
        >
          {q.sql}
        </TabPanel>
      ))}
    </Tabs>
  );
}

Tabs as links

Give each Tab an href to make it a real link (middle-click and "open in new tab" work). Selection then follows the URL: derive selectedKey from the current path, and wrap your app in React Aria's RouterProvider so clicks go through your client-side router. The preview uses a local stand-in for the router.

Overview Activity Members

Rendered for #overview.

import { useState } from "react";
import { RouterProvider } from "react-aria-components";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const routes = [
  { href: "#overview", label: "Overview" },
  { href: "#activity", label: "Activity" },
  { href: "#members", label: "Members" },
];

export default function TabsLinks() {
  // Stand-in for your router. In Next.js use `useRouter().push` and `usePathname()`.
  const [pathname, setPathname] = useState("#overview");

  return (
    <RouterProvider navigate={setPathname}>
      <Tabs selectedKey={pathname} className="w-full max-w-md">
        <TabList aria-label="Team">
          {routes.map((r) => (
            <Tab key={r.href} id={r.href} href={r.href}>
              {r.label}
            </Tab>
          ))}
        </TabList>
        {routes.map((r) => (
          <TabPanel key={r.href} id={r.href} className="text-muted-foreground">
            Rendered for <code className="text-foreground">{r.href}</code>.
          </TabPanel>
        ))}
      </Tabs>
    </RouterProvider>
  );
}

With the Next.js App Router:

app/providers.tsxtsx

"use client";

import { useRouter } from "next/navigation";
import { RouterProvider } from "react-aria-components";

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return <RouterProvider navigate={router.push}>{children}</RouterProvider>;
}

app/team/tabs.tsxtsx

"use client";

import { usePathname } from "next/navigation";
import { Tab, TabList, Tabs } from "@/components/ui/tabs";

export function TeamTabs() {
  const pathname = usePathname();
  return (
    <Tabs selectedKey={pathname}>
      <TabList aria-label="Team">
        <Tab id="/team" href="/team">Overview</Tab>
        <Tab id="/team/activity" href="/team/activity">Activity</Tab>
        <Tab id="/team/members" href="/team/members">Members</Tab>
      </TabList>
    </Tabs>
  );
}

When the panels are separate routes, render only the TabList and let each page render its own content.

Recipes

Account settings

Line tabs as the header of a Card, with a form in each panel and shared actions in the footer. Pad the TabList with the card's px-(--card-px) so the tabs line up with the content.

Profile

Notifications

Security

Display name

Used for sign-in and receipts.

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";
import { TextField } from "@/components/ui/text-field";

export default function TabsRecipeAccountSettings() {
  return (
    <Card className="w-full max-w-lg">
      <Tabs className="gap-0">
        <TabList aria-label="Account settings" className="px-(--card-px)">
          <Tab id="profile">Profile</Tab>
          <Tab id="notifications">Notifications</Tab>
          <Tab id="security">Security</Tab>
        </TabList>
        <CardContent className="pt-5">
          <TabPanel id="profile" className="grid gap-4">
            <TextField label="Display name" defaultValue="Maya Chen" />
            <TextField
              label="Email"
              type="email"
              defaultValue="maya@acme.dev"
              description="Used for sign-in and receipts."
            />
          </TabPanel>
          <TabPanel id="notifications" className="grid gap-4">
            <Switch
              defaultSelected
              labelPlacement="start"
              description="When someone mentions you or replies to your comment."
            >
              Mentions and replies
            </Switch>
            <Switch
              labelPlacement="start"
              description="A summary of activity in your projects, every Monday."
            >
              Weekly digest
            </Switch>
          </TabPanel>
          <TabPanel id="security" className="grid gap-4">
            <TextField label="Current password" type="password" />
            <TextField label="New password" type="password" />
          </TabPanel>
        </CardContent>
      </Tabs>
      <CardFooter className="justify-end border-t">
        <Button variant="outline">Cancel</Button>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  );
}

Install command

Small segmented tabs switch the package manager, with a copy button in the same bar. The TabList can sit inside any layout wrapper as long as it's within Tabs.

pnpm

npm

yarn

bun

pnpm dlx shadcn@latest add @desyne/tabs

import { CheckIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
import type { Key } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const commands = [
  { id: "pnpm", command: "pnpm dlx shadcn@latest add @desyne/tabs" },
  { id: "npm", command: "npx shadcn@latest add @desyne/tabs" },
  { id: "yarn", command: "yarn dlx shadcn@latest add @desyne/tabs" },
  { id: "bun", command: "bunx --bun shadcn@latest add @desyne/tabs" },
];

export default function TabsRecipeInstall() {
  const [manager, setManager] = useState<Key>("pnpm");
  const [copied, setCopied] = useState(false);
  const command = commands.find((c) => c.id === manager)?.command ?? "";

  return (
    <div className="w-full max-w-lg overflow-hidden rounded-lg border bg-card">
      <Tabs
        variant="segmented"
        size="sm"
        selectedKey={manager}
        onSelectionChange={(key) => {
          setManager(key);
          setCopied(false);
        }}
        className="gap-0"
      >
        <div className="flex items-center justify-between gap-2 border-b px-2 py-1.5">
          <TabList aria-label="Package manager" items={commands}>
            {(c) => <Tab id={c.id}>{c.id}</Tab>}
          </TabList>
          <Button
            variant="ghost"
            size="icon-xs"
            aria-label={copied ? "Copied" : "Copy command"}
            onPress={() => {
              navigator.clipboard?.writeText(command);
              setCopied(true);
            }}
          >
            {copied ? <CheckIcon /> : <CopyIcon />}
          </Button>
        </div>
        {commands.map((c) => (
          <TabPanel key={c.id} id={c.id} className="rounded-none px-4 py-3">
            <code className="block overflow-x-auto whitespace-nowrap font-mono text-foreground text-xs">
              {c.command}
            </code>
          </TabPanel>
        ))}
      </Tabs>
    </div>
  );
}

Card with date range

A segmented range picker in CardAction drives the chart below. Wrapping the header and content in Tabs keeps the list and panels connected.

Revenue

Gross volume, all products

30d

90d

$51,920+9.8%

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs";

const ranges = [
  {
    id: "7d",
    label: "7d",
    total: "$12,480",
    change: "+4.2%",
    bars: [40, 55, 48, 62, 58, 71, 66],
  },
  {
    id: "30d",
    label: "30d",
    total: "$51,920",
    change: "+9.8%",
    bars: [52, 48, 60, 57, 64, 70, 68, 75, 72, 80],
  },
  {
    id: "90d",
    label: "90d",
    total: "$148,310",
    change: "+18.1%",
    bars: [30, 38, 45, 42, 51, 58, 55, 63, 70, 74, 79, 86],
  },
];

export default function TabsRecipeAnalytics() {
  return (
    <Card className="w-full max-w-md">
      <Tabs
        variant="segmented"
        size="sm"
        defaultSelectedKey="30d"
        className="gap-4"
      >
        <CardHeader>
          <CardTitle>Revenue</CardTitle>
          <CardDescription>Gross volume, all products</CardDescription>
          <CardAction>
            <TabList aria-label="Date range" items={ranges}>
              {(r) => <Tab id={r.id}>{r.label}</Tab>}
            </TabList>
          </CardAction>
        </CardHeader>
        <CardContent>
          {ranges.map((r) => (
            <TabPanel key={r.id} id={r.id} className="grid gap-4">
              <div className="flex items-baseline gap-2">
                <span className="font-semibold text-2xl text-foreground tabular-nums">
                  {r.total}
                </span>
                <span className="font-medium text-success text-xs">
                  {r.change}
                </span>
              </div>
              <div className="flex h-24 items-end gap-1.5" aria-hidden>
                {r.bars.map((h, i) => (
                  <div
                    // biome-ignore lint/suspicious/noArrayIndexKey: static decorative bars
                    key={i}
                    className="flex-1 rounded-sm bg-brand/80"
                    style={{ height: `${h}%` }}
                  />
                ))}
              </div>
            </TabPanel>
          ))}
        </CardContent>
      </Tabs>
    </Card>
  );
}

Accessibility

Implements the WAI-ARIA tabs pattern: role="tablist", role="tab" with aria-selected, and role="tabpanel" labelled by its tab through aria-labelledby.
The tab list is a single tab stop. Focus lands on the selected tab; the arrow keys move between tabs and wrap from the last to the first.
A panel is focusable (tabIndex="0") when it has no focusable content of its own, so keyboard users can reach and scroll it.
Disabled tabs are skipped by keyboard navigation.
Left and right arrows follow the reading direction and flip in right-to-left locales.
The selection indicator animation is disabled when the user prefers reduced motion.
Icon-only tabs need aria-label.

Keyboard

Key	Action
`Tab`	Moves focus to the selected tab, then into the panel
`←` / `→`	Moves to the previous / next tab (both orientations)
`↑` / `↓`	Moves to the previous / next tab (vertical only)
`Home` / `End`	Moves to the first / last tab
`Enter` / `Space`	Selects the focused tab (with `keyboardActivation="manual"`)

Styling

Data attributes

On Tabs and TabList:

Attribute	Present when
`data-orientation`	Always, set to `horizontal` or `vertical`. `Tabs` adds `group/tabs`, so children can use `group-data-[orientation=vertical]/tabs:…`.

On TabList only:

Attribute	Present when
`data-overflowing`	A horizontal list is wider than its box and scrolls

On each Tab:

Attribute	Present when
`data-selected`	The tab is selected
`data-hovered`	Hovered with a mouse or pen
`data-pressed`	Being pressed
`data-focused` / `data-focus-visible`	Focused / focused with the keyboard
`data-disabled`	The tab is disabled

On each TabPanel:

Attribute	Present when
`data-focused` / `data-focus-visible`	The panel has focus / keyboard focus
`data-inert`	Mounted with `shouldForceMount` but not selected
`data-entering` / `data-exiting`	The panel is animating in / out

Slots

`data-slot`	Element
`tabs`	Root
`tab-list`	Tab list
`tab`	Each tab
`tab-panel`	Each panel

Customizing

className on every part accepts a string or a function of its render props, and is merged with the built-in classes with tailwind-merge.
The tab label is wrapped in an inline <span> above the indicator, so icons and badges line up with the text.
The line indicator and selected text use the brand color; the segmented thumb uses card. Override with classes such as data-selected:text-foreground on Tab.
The root has gap-4 between the list and the panels. Change it with className="gap-0" (as in the enclosed examples) or any other gap.

API Reference

Tabs

Prop

Type

Also accepts every prop of React Aria's Tabs.

Toggle Button Group — segmented control for a value, without panels.
Disclosure — sections that expand in place, several at once.
Sidebar — primary navigation for an app.
Card — a common container for tabbed content.