Tabs

Switches between peer views of the same object, such as overview, activity and settings. It is not navigation, so it never changes the page.

import from ~/components/ui/tabs

Default

Scope, budget and the two people carrying it. The summary a stranger reads first.

Tabs / TabsList / TabsTrigger / TabsContent

Three peer views of one endeavor. The trigger value and the content value are the join, so order in the markup is free.

With icons

What we agreed to build, in one page.

icon + label

The trigger sizes any svg child itself. Keep the text label: an icon-only tab is a guessing game.

Keyboard and disabled state

Still ours. Nobody outside the studio sees it.

roving focus

Tab moves focus into the list, then arrow keys move between triggers and Home / End jump to the ends. A disabled trigger is skipped.

Rules

Do

Use tabs for peer views of one object: overview, activity, settings.
Keep the set small, two to five triggers. A longer set wants a sidebar.
Set defaultValue so a panel is open on arrival. An empty tab strip is a dead end.
Leave arrow-key navigation to Radix. Roving focus and Home / End come free.
Give every trigger a text label. Layout classes at the call site are fine: w-full, max-w-md.

Don't

Do not use tabs to navigate between pages. That is a link, and it needs a URL.
Do not use tabs for a sequence. A multi-step flow wants a stepper with next and back.
Do not restyle the trigger with color, font or rounded classes. The active state is the component job.