Tabs

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

Pure UI

Installation

Loading...

Tabs component is powered by nuqs library.

Don't forget to install NuqsAdapter for your framework or remove search params feature from the component manually.

Usage

<Tabs>
  <TabsList>
    <TabsTrigger />
  </Tabs.List>
  <TabsContent />
</Tabs>

Examples

Compact

Sizes

Vertical

Direction

Disabled

Search Params

Pass paramName to sync the active tab with the URL query params.

This feature is powered by nuqs library.

Don't forget to install NuqsAdapter for your framework.

Height Animation

Use AutoResize add-on component to animate the height of the TabsContent

Reduce Motion

Animation Presets

Fade

Blur

Motion

Motion Blur

Perspective

Perspective Blur

Scale

Custom Usage

API Reference

Tabs

PropTypeDefault
animation
AnimationProps
―
animationPreset
enum
"motion-blur"
transition
Transition
―
transitionPreset
enumTransitionPreset
―
reduceMotion
boolean
false
compact
boolean
false
paramName
string
―

Support all Radix API

TabsList

Support all Radix API

TabsTrigger

Support all Radix API

TabsContent

Support all Radix API

PrevSwitch
Next Textarea