Docs › Components › Tabs

Shadcn Tabs

The shadcn/ui Tabs component switches between related panels of content in the same space, styled with Tailwind CSS v4. Built on Base UI, it supports keyboard arrow navigation and roving focus out of the box. Tabs organize settings, dashboards, and product detail views across ShadcnStore blocks.

Key features

• Switch between related panels in the same space.
• Keyboard arrow navigation with a single tab stop (roving focus).
• Controlled or uncontrolled active tab.
• Triggers and panels matched by value.
• Built on Base UI with keyboard arrow navigation and roving focus.

Installation

npx shadcn@latest add tabs

Usage

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

export function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings.</TabsContent>
      <TabsContent value="password">Password settings.</TabsContent>
    </Tabs>
  )
}

Anatomy

Part	Purpose
Tabs	Root; holds defaultValue or controlled value.
TabsList	Container for the triggers.
TabsTrigger	A tab button; its value matches a panel.
TabsContent	A panel shown when its value is active.

Vertical

Set orientation="vertical" on Tabs to stack the triggers beside the content, which suits settings panels and side navigation.

<Tabs defaultValue="account" orientation="vertical" className="flex flex-row gap-4">
  <TabsList>…</TabsList>
  <TabsContent value="account">…</TabsContent>
</Tabs>

Line variant and disabled tabs

Use variant="line" on TabsList for an underlined style, and disabled on any TabsTrigger to make it non-interactive.

<TabsList variant="line">
  <TabsTrigger value="home">Home</TabsTrigger>
  <TabsTrigger value="archived" disabled>Archived</TabsTrigger>
</TabsList>

Controlled tabs

const [tab, setTab] = useState("account")

<Tabs value={tab} onValueChange={setTab}>
  …
</Tabs>

Accessibility

• The tab list supports arrow-key navigation between tabs, with a single tab stop in the page tab order.
• Each TabsTrigger is associated with its TabsContent, so screen readers announce the relationship. Keep trigger labels short and descriptive.
• Do not use Tabs for sequential steps; use a stepper or a form flow where order matters.

When to use Tabs

Use Tabs when content divides into a few peer sections that the user switches between and only one is relevant at a time: profile vs. billing, description vs. reviews, chart vs. table. For many sections, or content that should all be scannable at once, prefer stacked sections or an Accordion. For navigation between pages, use links rather than Tabs.

Used in these blocks

• Apps: settings and dashboard sections.
• Product overview: description, specs, and reviews.
• Widgets: switchable metric views.

Related components

Tabs commonly wrap a Card, a Data Table, or a Form in each panel, and sit alongside a Button toolbar. For overflow actions, add a Dropdown Menu.

FAQ

What are shadcn tabs used for?

Tabs switch between related panels of content in the same space, such as account settings sections or product detail views.

How do I set the default tab in shadcn tabs?

Set defaultValue on the Tabs root to the value of the trigger you want active first, or control it with value and onValueChange.

Can shadcn tabs be controlled?

Yes. Pass value and onValueChange to Tabs to control the active tab from your own state.

How do I make tabs full width?

Add className="w-full" to TabsList and flex-1 to each TabsTrigger so the triggers share the available width evenly.