Tabs

Sectioned panels for switching between related views.

Product workspace

Keep the main summary visible while switching between planning, delivery, and support details without leaving the current surface.

The root now keeps the panel shell measured, so this shorter overview state still lands cleanly when you switch back from denser content.

Installation

npx shadcn@latest add @iconiq/r-tabs

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Product workspace

Keep the main summary visible while switching between planning, delivery, and support details without leaving the current surface.

The root now keeps the panel shell measured, so this shorter overview state still lands cleanly when you switch back from denser content.

Props

Tabs

6 props

Root wrapper for measured tabs with the same animated underline, panel sizing, and content transition shell layered over Radix UI primitives.

childrenReactNode

Required

Compose TabsList, TabsTrigger, and TabsContent inside the root.

defaultValuestring

Initial active tab value for uncontrolled usage. Invalid values fall back to the first declared TabsContent.

valuestring

Controlled active tab value. Invalid values fall back to the first declared TabsContent.

onValueChange(value: string) => void

Called when a trigger activates a different tab through click or keyboard interaction.

activationMode"manual" | "automatic"

Default"manual"

Controls keyboard behavior. In manual mode arrow keys move focus and Enter or Space activates the focused tab. In automatic mode focus movement also changes the active tab.

classNamestring

Merged onto the root wrapper around the list and content panels.

Notes

The root measures the active panel and animates the outer container height, which helps tab sets with uneven content avoid layout jumps.

TabsContent elements act as declarative panel definitions. The root collects them and renders only the active panel into the animated shell.

Development builds warn when value or defaultValue does not match any TabsContent.

TabsList

2 props

Inline trigger rail with a spring-driven underline indicator and horizontal overflow support for longer tab sets.

childrenReactNode

Usually a row of TabsTrigger elements.

classNamestring

Merged onto the inline-flex rail around the triggers.

Notes

Uses Radix tabs list under the same scrollable trigger rail and motion underline shell, with manual or automatic activation controlled through the Radix root.

The active underline measures the selected trigger width and offset, then follows it with spring motion.

The list can scroll horizontally instead of compressing trigger hit areas when labels get wider.

TabsTrigger

4 props

Interactive tab button with touch-friendly sizing, quicker hover feedback, a visible keyboard focus ring, and coordination with the shared underline.

valuestring

Required

Unique tab identifier used for active state and content matching.

childrenReactNode

Required

Label content rendered inside the trigger button.

classNamestring

Merged onto the trigger button for local spacing, typography, or active-state overrides.

disabledboolean

Prevents the trigger from receiving focus or changing the active tab.

Notes

Built on Radix trigger primitives while preserving the same trigger sizing, text-color interpolation, and underline coordination as the core tabs component.

In the default `manual` activation mode, arrow keys move focus without switching content. Press Enter or Space to activate the focused tab.

If you want selection-on-focus behavior, set `activationMode="automatic"` on the Tabs root.

TabsContent

3 props

Declarative panel definition tied to a matching trigger value and rendered through the root's animated panel shell.

valuestring

Required

Matches the corresponding TabsTrigger value.

childrenReactNode

Required

Panel body shown when the content value is active.

classNamestring

Merged onto the rendered active panel element when this content value is selected.

Notes

The root still collects declarative TabsContent children and renders the active Radix content panel through the same measured motion shell.

TabsContent itself does not render a live wrapper where it is declared. The root collects these elements and mounts only the active panel.

Standard div attributes such as data-*, aria-*, id, style, and event handlers are forwarded to the rendered panel element.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.