SayUI
← Library→ Turn this into a prompt
Navigation & structure

Tabs

A row of labels that swap mutually exclusive views in the same place.

Also known as tab bar · section tabs · tab navigation

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tabs".

Build accessible tabs for Overview / Activity / Settings: role=tablist with arrow-key navigation, only one selected tab, and matching tabpanels that hide inactive content from assistive tech.

Anatomy:
- tab list: Horizontal (or vertical) set of tab triggers.
- selected tab: Clear selected state; only one active in a group.
- tab panel: Content region tied to the selected tab.

Preferred API / pattern: `shadcn Tabs (Radix)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Tabs that are really page routes without URL updates
  • ○Avoid: More than ~6 tabs on mobile
  • ○Avoid: Missing keyboard support

In plain wordsHow people search for it

“those clickable labels at the top that switch what's below”“the row of sections like Browser tabs but inside a page”“switching between Overview / Activity / Settings without leaving”

AnatomyOpen for part names

tab list
Horizontal (or vertical) set of tab triggers.
selected tab
Clear selected state; only one active in a group.
tab panel
Content region tied to the selected tab.

How to write itOpen for stack patterns

Web (HTML/CSS)role="tablist" / tab / tabpanel
React + Tailwind + shadcn/uishadcn Tabs (Radix)
SwiftUITabView / Picker .segmented (related)
Ant Design<Tabs items>

Notes

Tabs are for peer sections of the same object, not a full app sitemap (use nav for that). Keep labels short and parallel. Don't nest tabs inside tabs. Keyboard: arrow keys move selection in a proper tablist.

Help me choose: Tabs vs Segmented control →

Common mistakesHumans and models trip here

  • Tabs that are really page routes without URL updates: deep links break.
  • More than ~6 tabs on mobile: overflow or use a select.
  • Missing keyboard support: implement roving tabindex or Radix Tabs.

More failure symptoms on AI broke it.

Related patterns

Segmented ControlA compact mutually exclusive button group—often for simple view modes.Dropdown MenuA compact menu of actions or options revealed from a trigger control.BreadcrumbA trail of links showing the path from the root to the current page.

Spotted a wrong name or missing pattern?

Message on X