'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Tabs
Tabs
A tab list, its selection indicator, triggers, and panels.
Anatomy
- 1
.tabs-rootTabs composition boundary. - 2
.tabs-listContainer for tab triggers. - 3
.tabs-triggerSelects and labels a tab panel. - 4
.tabs-indicatorAnimated marker for the selected tab. - 5
.tabs-contentPanel associated with a trigger.
Variants
- Primary
- Secondary
A single active panel, with keyboard navigation owned by Ark UI.
The same part utilities work with any headless tab anatomy.
When to use
Use tabs to move between peer views whose content can be understood from short, stable labels.