Tabs

Sectioned panels for switching between related views.

Installation

npx shadcn@latest add @iconiq/tabs

Props

Tabs

Radix tabs root with a shared spring transition config for the sliding active pill. Supports controlled and uncontrolled usage.

childrenReactNode

Required

Compose TabsList, TabsTrigger, and TabsContent inside the root.

defaultValuestring

Initial active tab for uncontrolled usage when you do not manage value in React state.

valuestring

Controlled active tab value.

onValueChange(value: string) => void

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

classNamestring

Merged onto the Radix tabs root wrapper.

Each Tabs instance uses a unique layoutId so multiple tab bars on one page do not share pill animations.

Use controlled state with value and onValueChange, or pass defaultValue for uncontrolled usage.

TabsList

Full-width segmented rail with rounded neutral background and padding for the trigger row.

childrenReactNode

Usually a row of TabsTrigger elements.

classNamestring

Merged onto the inline-flex rail around the triggers.

Uses a rounded neutral surface in light and dark mode with overflow hidden so the active pill stays clipped cleanly.

TabsTrigger

Interactive tab button with a shared layoutId pill behind the active trigger and mix-blend-exclusion label treatment.

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.

The active trigger renders a motion.div with layoutId active-tab-bg that slides between tabs with spring motion.

Inactive triggers fade slightly on hover while keeping the label readable through mix-blend-exclusion.

TabsContent

Radix content panel tied to a matching trigger value below the tab list.

valuestring

Required

Matches the corresponding TabsTrigger value.

childrenReactNode

Required

Panel body shown when the content value is active.

classNamestring

Merged onto the rendered content panel element.

Radix handles mounting and visibility for the active panel.

Standard Radix content props such as forceMount are forwarded through the primitive.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-tabs, motion.