Component · Navigation · 13
Tabs
Tabs = a row of labels where exactly one is selected and controls a panel below; say underline or pill.
Name radius, hover, and contrast. Do not say “make it nice”.
What is a Tabs?
Tabs switch peer views. Name orientation, selected indicator, and panel padding.
Variants
Tap a property to highlight it in the preview.
- Tabs marked by a line under the active item.
- Tabs wrapped in a filled container; the active item gets a contrasting pill.
- The currently chosen value or tab, marked distinctly from the rest.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
- The content area tied to the active tab.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
- The currently chosen value or tab, marked distinctly from the rest.
Anatomy
These are the parts to name in your prompt.
- 01 Tab list
- 02 Selected indicator
- 03 Panel
When to use
- Switching between peer views — Overview / Tokens / Usage
- Settings pages with 2–5 sections
- Detail pages with secondary data views
Avoid when
- Steps in a sequence — use a stepper
- Navigation to different pages — use links
- More than 6 tabs — regroup the content
See also
Themes
AI Chat Product UI→Anti-patterns
Instant 0ms State Change→ Create an underline tab set.
STYLE
- selected: 2px accent underline
- quiet unselected labels
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui