Navigation
Tabs
One strip, several panels.
Examples
default
Notes
Radix Tabs root, re-exported as a typed passthrough.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
TabsList
The tab strip.
Scrolls horizontally rather than wrapping. A wrapped second row of tabs moves every tab below it when the strip grows, and the reader loses the one they were about to click.
Takes no props of its own.
TabsTrigger
One tab.
The active marker is a 2px ink rule pulled onto the strip's own border with -mb-px, so the two occupy the same line instead of stacking into a 3px edge. 44px tall, because a tab is a pointer target like any other.
Takes no props of its own.
TabsContent
The panel paired to a by matching value.
Takes no props of its own.
Re-exports
Tabs = TabsPrimitive.RootRadix Tabs root, re-exported as a typed passthrough.
Accessibility
- The strip scrolls rather than wrapping: a wrapped second row moves every tab below it and the reader loses the one they were about to click.
- 44px tall, because a tab is a pointer target like any other.