Component Card

Tabs

Switch between peer views in the same content context.

Tabs anatomy

When to Use

Peer sections like Profile, Billing, and Security.
Context-preserving switches where users stay on one page.
Compact desktop navigation for 3-6 related panels.

When NOT to Use

Use tabs for equivalent categories that share one page context.

For deep navigation paths, use sidebar or navbar instead.

Variants

Underline tabs

Pill tabs

Segmented control

Confused?

If users need path context, pair tabs with Breadcrumbs or use breadcrumbs alone for deep routes.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement tabs for switching between account sections with a clear active indicator and keyboard-accessible focus states.

Pencil Prompt

Design a horizontal tab bar with one active tab style and two inactive styles that still read as interactive.

Next Lesson

Breadcrumbs