Tabs
UI ComponentsA navigation pattern that organizes content into separate panels, where only one panel is visible at a time, switched by clicking horizontal tab headers.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Tabs coming soon.
How It Works in Apps/Websites
Tabs divide content into logical sections accessed via horizontal buttons (tabs). Clicking a tab shows its associated panel and hides others. The active tab is visually distinguished (underline, background color, or bold). Content typically doesn't reload - it switches instantly. Good for related content that doesn't need comparison.
How AI Interprets This Term
When you say 'tabs', AI expects: horizontal row of tab buttons at top, with the active tab visually highlighted (often with underline or different background). Content panel below changes based on selection. Tab bar may have border-bottom, active tab often has accent-colored underline.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a tabbed interface with Overview, Features, and Pricing sections
Design a tab component: horizontal tab bar with 4 tabs, active tab has blue underline (#3b82f6, 2px). Tab text 14px medium weight. Smooth underline animation when switching. Content panel has 24px padding.
Show underlined tabs vs pill-style tabs vs boxed tabs for the same content
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Related content categories
- •Dashboard sections
- •Profile/settings pages
- •Product details (description, specs, reviews)
When NOT to Use
- •Sequential steps (use stepper)
- •Content users need to compare
- •Too many tabs (more than 5-7)