Tabs

Accessible tab interface built on Base UI Tabs. The list has a muted pill background; the active trigger lifts to background with a shadow. Supports controlled and uncontrolled modes.

Preview

Account settings

Manage your account details and preferences here.

Installation

bash

npx shadcn@latest add @layout/tabs

Usage

tsx

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

Examples

Three tabs

Project overview and key metrics.

With disabled tab

Active tab content.

Guidelines for AI agents

Each TabsContent value must match the corresponding TabsTrigger value. Use defaultValue for uncontrolled tabs; pair value and onValueChange for controlled. Grid the TabsList with grid-cols-N to make triggers equal width.

Never

Neveruse tabs for wizard/step flows; use a stepper pattern instead
Neverplace tabs inside tabs; flatten the hierarchy
Neverrely on tab order for critical information; the inactive panel is hidden from the DOM by default
Neverhardcode tab indicator colours; the active state resolves through bg-background and shadow-xs

Tokens consumed

--layout-muted--layout-muted-fg--layout-bg--layout-fg--layout-ring--layout-radius--layout-shadow-xs--layout-duration-base