Loading...
Tabs are a UI component used to organize and navigate between related sections of content within the same context. They display one panel at a time, helping users switch between different views or subsections of a single topic without leaving the page.
Can be controlled or uncontrolled
Supports horizontal/vertical orientation and RTL direction
Full keyboard navigation
Multiple sizes
Animated with Motion
Respects reduce motion with system settings and through props
State synced with search params using nuqs
Pass paramName to sync the active tab with the URL query params.
This feature is powered by nuqs library.
Use AutoResize add-on component to animate the height of the TabsContent
| Prop | Type | Default |
|---|---|---|
animation | AnimationProps | ― |
animationPreset | enum | "motion-blur" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | ― |
reduceMotion | boolean | false |
compact | boolean | false |
paramName | string | ― |
Support all Root Radix API.
Support all List Radix API.
Support all Trigger Radix API.
Support all Content Radix API.