Tabs
Layered content organization. Tabs allow users to navigate between related views within the same context.
Usage
Use Tabs to organize content into high-level categories that can be viewed one at a time. They are most effective when the categories are related and the user doesn't need to see them simultaneously.
Content
Account Settings
A standard implementation of tabs for categorized settings.
Profile Settings
Manage your public profile information and preferences.
Profile Form Fields
Spec
- Primitive: Built on `@radix-ui/react-tabs`.
- List Background: #F8F8F8 (Standard muted accent).
- Active Trigger: Brand Primary (#D74D0F) text with White background.
- Radius: 0.5rem (Standard system radius).
- Animation: Instant content switching with focus ring support.
Anatomy
ACTIVE TAB
INACTIVE TAB
TAB ARCHITECTURE