Tabs

A set of layered sections of content that are displayed one at a time.

Installation

bash
npx shadcn@latest add tabs

Import

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

Default

Manage your account settings.

Disabled tab

Account content.

Props

Tabs

PROPTYPEDEFAULTDESCRIPTION
defaultValuestring—Default active tab value (uncontrolled)
valuestring—Controlled active tab value
onValueChange(value: string) => void—Called when active tab changes
orientation"horizontal" | "vertical""horizontal"Orientation of the tab list

TabsTrigger

PROPTYPEDEFAULTDESCRIPTION
valuestring—Unique value identifying this tab (required)
disabledbooleanfalseDisables the tab trigger

TabsContent

PROPTYPEDEFAULTDESCRIPTION
valuestring—Value matching the corresponding TabsTrigger (required)
forceMountbooleanfalseForce mount the content even when not active

Accessibility

  • Arrow Left/Right navigates between tabs
  • Space/Enter activates the focused tab
  • Each panel is linked to its trigger via aria-controls