iconiq
—Open GitHub

Tabs

Clean segmented tabs with active-state surfaces and straightforward panel switching.

Open in

Product workspace

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

Installation

npx shadcn@latest add @iconiq/tabs

Props

Tabs

5 props

Root wrapper for a clean tab interface with controlled or uncontrolled value handling from Base UI.
childrenReactNode
Required
Compose TabsList, TabsTrigger, and TabsContent inside the root, following the familiar shadcn-style structure.
defaultValuestring
Initial active tab value for uncontrolled usage.
valuestring
Controlled active tab value.
onValueChange(value: string, details: object) => void
Called when a trigger changes the active tab through click or keyboard navigation.
classNamestring
Merged onto the root wrapper around the list and content panels.

Notes

The implementation stays intentionally small: it relies on Base UI for selection state, keyboard behavior, and panel wiring.
Use local className overrides on TabsList or TabsTrigger when a specific screen needs a more opinionated visual treatment.

TabsList

2 props

Inline trigger rail that provides the muted segmented background behind a set of tab triggers.
childrenReactNode
Usually a row of TabsTrigger elements.
classNamestring
Merged onto the inline-flex rail around the triggers.

Notes

The default styles keep the list compact so it works well for docs toggles, install blocks, and simple settings surfaces.

TabsTrigger

4 props

Interactive tab button with a clean active surface, quieter inactive state, and built-in accessibility wiring from Base UI.
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

Active styling uses the presence of Base UI's data-active attribute rather than a custom indicator layer.
Focus, arrow-key navigation, and ARIA relationships come from the underlying tabs primitive.

TabsContent

3 props

Single panel tied to a matching trigger value.
valuestring
Required
Matches the corresponding TabsTrigger value.
childrenReactNode
Required
Panel body shown when the content value is active.
classNamestring
Merged onto the rendered panel element.

Notes

Hidden panels are managed by the underlying tabs primitive, so you keep the usual DOM and accessibility behavior without extra wrapper logic.
Standard div attributes such as data-*, aria-*, id, style, and event handlers are forwarded to the panel element.