Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Advanced

Nested Tabs for React

Profile, Settings and Billing tabs, each with its own row of tabs inside the panel.

Framework
UI library

One row of tabs is not enough when every section has subsections. Each outer panel renders a second Tabs with its own triggers and default, so Profile, Settings and Billing each switch between three views. Use it for account pages where the top level picks a section and the second picks a detail.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the outer tab set up?

Tabs starts on profile and is w-full max-w-2xl. The triggers are Profile, Settings and Billing, built from a sections array, and each panel is a bordered block headed by the section name.

Where do the second tabs come from?

Each outer panel renders its own Tabs from the section's tabs. Profile starts on Personal Info, Settings on General and Billing on Current Plan.

Does the inner tab stay put when I leave the outer tab?

No. Inactive panels unmount, so the inner tabs mount again at their default when you come back. Set keepMounted on each TabsContent to keep the inner tabs mounted.

What is inside an inner panel?

A bordered box of rows, each a font-medium label over muted text. Personal Info shows Full Name, Email and Location.

Do the inner lists look different from the outer list?

No. Both use TabsList and TabsTrigger with no extra classes. The inner list sits under the panel heading.

Do the inner values collide with the outer ones?

No. Each Tabs matches only the triggers and panels inside it. profile belongs to the outer tabs, and personal, general and plan to the inner ones.

All 11 tabs examples