shadcn.io is not affiliated with official shadcn/ui

Shadcn Tabs for React

Mutually exclusive panels in one region.

PreviewCode

Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/tabs.json

npx shadcn@latest add https://kit.dev/r/base/tabs.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/tabs.json

yarn shadcn@latest add https://kit.dev/r/base/tabs.json

Install the following dependencies:

bun add @base-ui/react tailwind-variants

npm install @base-ui/react tailwind-variants

pnpm add @base-ui/react tailwind-variants

yarn add @base-ui/react tailwind-variants

Copy and paste the following code into your project.

components/ui/tabs.tsx

"use client";

import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";

const tabsRootClassName = cn(
  "cn-tabs group/tabs flex data-horizontal:flex-col"
);

export const Tabs = (props: TabsPrimitive.Root.Props) => {
  const { className, orientation = "horizontal", ...rest } = props;

  return (
    <TabsPrimitive.Root
      className={cn(tabsRootClassName, className)}
      data-orientation={orientation}
      data-slot="tabs"

Update the import paths to match your project setup.

Anatomy

Tabs
├── TabsList
│   └── TabsIndicator
├── TabsTrigger
└── TabsContent

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

<Tabs className="w-[400px]" defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <Card>
      <CardHeader>
        <CardTitle>Overview</CardTitle>
        <CardDescription>
          View your key metrics and recent project activity. Track progress
          across all your active projects.
        </CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        You have 12 active projects and 3 pending tasks.
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="analytics">
    <Card>
      <CardHeader>
        <CardTitle>Analytics</CardTitle>
        <CardDescription>
          Track performance and user engagement metrics. Monitor trends and
          identify growth opportunities.
        </CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        Page views are up 25% compared to last month.
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="reports">
    <Card>
      <CardHeader>
        <CardTitle>Reports</CardTitle>
        <CardDescription>
          Generate and download your detailed reports. Export data in multiple
          formats for analysis.
        </CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        You have 5 reports ready and available to export.
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="settings">
    <Card>
      <CardHeader>
        <CardTitle>Settings</CardTitle>
        <CardDescription>
          Manage your account preferences and options. Customize your
          experience to fit your needs.
        </CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        Configure notifications, security, and themes.
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>

Accessibility

Key	Description
`ArrowDown`	Move to the next item when `orientation` is `"vertical"`.
`ArrowUp`	Move to the previous item when `orientation` is `"vertical"`.
`ArrowLeft`	Move to the previous item when `orientation` is `"horizontal"`.
`ArrowRight`	Move to the next item when `orientation` is `"horizontal"`.
`Home`	Go to the start.
`End`	Go to the end.
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Line

Use variant="underline" on TabsList for a line style.

PreviewCode

Vertical

Use orientation="vertical" for vertical tabs.

PreviewCode

Disabled

Disabled tab triggers.

PreviewCode

Icons

Tabs with icons.

PreviewCode

Rtl

Right-to-left tabs. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Tabs

div

PropType

value?TabsTab.Value

defaultValue?TabsTab.Value

onValueChange?(value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) → void

orientation?TabsRoot.Orientation

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tabs"

data-scope"tabs"

data-part"root"

data-focus?string

data-orientation?string

TabsList

div

PropType

activateOnFocus?boolean

loopFocus?boolean

variant?"default" | "line"

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tabs-list"

data-scope"tabs"

data-part"list"

aria-labelstring

aria-orientationstring

data-focus?string

data-orientationstring

data-variant?string

role"tablist"

TabsTrigger

button

PropType

valueTabsTab.Value

disabled?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tabs-trigger"

data-scope"tabs"

data-part"tab"

TabsContent

div

PropType

valueTabsTab.Value

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"tabs-content"

data-scope"tabs"

data-part"panel"