Tab — Tab UI Component Reference

Quick-reference skill for tab component design, accessibility patterns, and implementation.

When to Use

• Implementing tabbed content panels in web applications
• Designing tab navigation for sections of related content
• Making tabs accessible with proper ARIA roles and keyboard support
• Choosing between tabs, accordions, and other navigation patterns
• Building responsive tab components that work on mobile

Commands

intro

scripts/script.sh intro

Tab component overview — when to use tabs, types, alternatives.

anatomy

scripts/script.sh anatomy

Tab anatomy — tab list, tab buttons, tab panels, indicators, badges.

patterns

scripts/script.sh patterns

Design patterns — horizontal, vertical, scrollable, closeable, draggable tabs.

accessibility

scripts/script.sh accessibility

Accessibility — ARIA roles, keyboard navigation, focus management, screen readers.

state

scripts/script.sh state

State management — controlled vs uncontrolled, lazy loading, URL sync, persistence.

responsive

scripts/script.sh responsive

Responsive strategies — scrollable tabs, dropdown conversion, priority tabs, swipe.

css

scripts/script.sh css

CSS implementation — indicator animations, theming, variants, transitions.

checklist

scripts/script.sh checklist

Tab component design and implementation checklist.

help

scripts/script.sh help

version

scripts/script.sh version

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com