Tabs

DESIGN RATIONALE

A tab component that uses an animated underline indicator sliding between active tabs. The indicator uses a spring animation for organic movement. Inactive tabs use white/40; active tabs use white at 100%. On mobile, tabs scroll horizontally with hidden overflow and fade edges.

USAGE GUIDELINES

Use to organize related content into sections within a single page or card. Ideal for settings panels, product detail pages, and dashboards.