When to use it

Use Tabs when a page has several related content sections that a visitor should be able to switch between without navigating away. It fits naturally on product detail pages (overview, specifications, reviews), account settings (profile, notifications, security), and any layout that needs in-place section switching.

If the sections are independent enough to warrant their own URL, use route-based navigation instead of tabs. Tabs are for content that belongs on the same page.

Slot strategy

Tabs has a small, tight composition:

• Tabs is the root container. It manages active state and accepts defaultValue for uncontrolled usage or value + onValueChange for controlled usage.
• TabsList is the horizontal trigger row. It has a muted background and rounded container that visually groups the triggers.
• TabsTrigger is a single tab button. It highlights when active and needs a value string that matches a content panel.
• TabsContent is the panel that shows when its matching trigger is active. It renders below the trigger row.

Behavior and theming guidance

The trigger row uses a muted background with rounded corners. The active trigger gets a white background and subtle shadow, creating a raised-tab effect. Triggers support full keyboard navigation with arrow keys.

Content panels have a ring-offset focus ring for accessibility when focused via keyboard. They mount lazily: only the active panel renders in the DOM, which keeps large tab sets efficient.

For controlled tabs, use value and onValueChange when you need to sync tab state with a URL hash, query parameter, or external state. This is common for deep-linking into a specific product tab from search results or emails.