Tabs

Organizes related content across multiple sections, showing one section at a time.

Account Settings

Manage your account settings and preferences.

Code

Installation

npx shadcn@latest add tabs

Basic Example

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

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Account content here
  </TabsContent>
  <TabsContent value="password">
    Password content here
  </TabsContent>
</Tabs>

Reference

Props

Prop	Type	Default	Description
value	string	—	Controlled active tab value (Tabs)
defaultValue	string	—	Default active tab (uncontrolled)
onValueChange	function	—	Callback when tab changes
value	string	—	Tab identifier (TabsTrigger, TabsContent)

Multiple Tabs

Overview content

Usage Guidelines

When to Use

Use tabs to organize related content into separate sections that share the same context. They work well for settings panels, dashboards, and content that can be logically grouped but doesn't need to be seen simultaneously.

Tabs are ideal when you have 2-5 related sections. Avoid using tabs if users need to compare content across sections or if the content is sequential.

Best Practices

Keep tab labels short and descriptive
Use consistent capitalization across tabs
Limit tabs to 5-7 items maximum
Make tabs visually distinct when active
Ensure tab content loads quickly

Accessibility

Tabs are fully keyboard accessible. Users can navigate between tabs with arrow keys and activate with Enter or Space. The active tab is automatically announced to screen readers.

Ensure tab labels are clear and descriptive. Use aria-label when tab text alone doesn't provide sufficient context. Provide clear focus indicators for keyboard navigation.

Rhetoric-ds