Tabs
v1.0.3Updated 20 Jul 2026Tabbed content panels (Radix). Use for switching between related views in the same context. Adds pills / underline / segmented / enclosed visual variants, closable + addable tabs, overflow scroll, sticky header, and coun
Preview
Live · 17 stories▸Why this is recommendedtabsnavigationswitchpills+4
The default, out-of-the-box Tabs.
- ✓Settings sub-sections
- ✓Detail page sub-views
- ✓Switching dashboard slices
- ✓Editor tab strips (closable / addable)
- ✓Tonal navigation
- Horizontal / vertical
- Keyboard navigation
- Default and controlled value
- Variants: pills / underline / segmented / enclosed
- Closable tabs (with x button)
- Addable tabs (+ button)
- Horizontal scroll on overflow
- Sticky tab strip
- Counts + badges per trigger
- i18n: labels prop overrides the scroll / add / close button aria-labels (DEFAULT_TABS_LABELS)
- ✕Top-level navigation (use Sidebar/Topbar)
- ✕Single tab (use a section heading)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueActive tab
—onValueChangeValue change callback
—variantVisual style
—tabsDeclarative tab definitions (alternative to children)
—closableShow close button per tab
—addableShow + button at end of strip
—stickySticky tab strip
—labelsOverride built-in UI strings (scroll-chevron, add-tab and close-tab aria-labels) for i18n; English defaults exported as DEFAULT_TABS_LABELS
—