# Shadcn Tabs

> Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/tabs
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/tabs.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/tabs.md
- MCP: `get_component("tabs")`, then `get_examples("tabs")`
- Examples: 9

## When to use

- Account, password and settings forms split into panels so only one shows at a time
- Side navigation inside a page, with sections stacked in a column beside the open panel
- Views of one surface, such as dashboard sections, mail folders or visitor stats by period

## When not to use

- A finished account settings page with workspace, team and billing sections built in: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- A metric card whose period switch redraws a plotted trend: use the [Line Chart blocks](https://web.dev.reui.io/blocks/chart/line-chart.md)
- A project header with a breadcrumb on top and a row of sections with avatars below: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)

## Agent notes

- Only the active `TabsContent` renders in either twin, so other panels ship no server HTML and lose typed values on a switch
- Arrow keys only move focus across `TabsTrigger` items on the base twin, where Enter or Space selects; radix selects on focus

## Examples

- [Basic](https://web.dev.reui.io/components/tabs/c-tabs-1.md): Basic tabs.. Best for the smallest setup: 2 triggers on a muted track switching between an account card and a password card.
- [Line Variant](https://web.dev.reui.io/components/tabs/c-tabs-2.md): Tabs with line variant.. Best for an underlined row stretched full width over 3 cards for account, password and preference forms.
- [Vertical](https://web.dev.reui.io/components/tabs/c-tabs-3.md): Tabs with vertical orientation.. Best for a muted column of 3 triggers on the left, with the matching form card opening to its right.
- [Vertical Line](https://web.dev.reui.io/components/tabs/c-tabs-4.md): Tabs with vertical orientation and line variant.. Best for a transparent left column where a thin bar on its right edge marks the active section, beside wider cards.
- [Icons](https://web.dev.reui.io/components/tabs/c-tabs-5.md): Tabs with icons.. Best for user, lock and gear icons ahead of each label on a muted track sized to its content, over 3 form cards.
- [Full Width Icons](https://web.dev.reui.io/components/tabs/c-tabs-6.md): Tabs with icons. Best for a full width muted track of Overview, Analytics and Settings with icons, over 1 line placeholder cards.
- [Badge Counts](https://web.dev.reui.io/components/tabs/c-tabs-7.md): Tabs with badge counts. Best for mail folders on an underlined row, with tinted count badges on Inbox, Drafts and Spam and none on Sent.
- [Side List Icons](https://web.dev.reui.io/components/tabs/c-tabs-8.md): Tabs with icons and line variant. Best for a side list of Projects, Tasks, Team and Reports, each led by an icon, 2 ending in a right aligned count badge.
- [Segmented Control](https://web.dev.reui.io/components/tabs/c-tabs-9.md): Segmented control tabs. Best for a controlled Daily to Yearly switch kept in React state, each panel showing one large visitor total.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.