Tabs

Versatile tab component with glass styling, animated indicators, badge support, and compound component pattern for content panels.

Installation

$ npx shadcn@latest add @orecus/tabs

Dependencies:

motion

Registry:

@orecus/color-utilsbadgeskeleton

Component

Basic Usage

Simple tabs with text labels. Click to navigate between tabs.

Active tab: overview

With Icons

Add icons before labels using the icon prop.

With Badges

Show notification counts using the badge prop.

Disabled Tabs

Disable individual tabs with the disabled prop.

Props

Prop	Type	Default	Description
`value`	`T extends string`	—	Currently selected tab value
`onValueChange`	`(value: T) => void`	—	Callback when selection changes
`fullWidth`	`boolean`	`false`	Whether tabs should take full width of container
`animation`	`'fade' \| 'slide'`	`'fade'`	Animation type for the active indicator
`variant`	`'normal' \| 'subtle' \| 'strong' \| 'solid' \| 'none'`	`'subtle'`	Visual variant of the container background
`indicatorVariant`	`'gradient' \| 'color' \| 'glass' \| 'solid'`	`'gradient'`	Visual variant for the active indicator. 'gradient' shows colorful gradient, 'color' shows flat solid color, 'glass' for glassmorphism, 'solid' for opaque background.
`colorCrossfade`	`boolean`	`false`	Enable animated color crossfade when switching tabs. Only applies with animation='slide' and indicatorVariant='gradient'. Uses hardcoded hex values, so primary/secondary use fallback colors rather than theme CSS variables.
`color`	`ThemeColor`	`'primary'`	Base color for the active indicator
`align`	`'start' \| 'center' \| 'end' \| 'grow'`	`'center'`	Alignment of tabs within the container
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant affecting padding and font size
`invert`	`boolean`	`false`	Invert glass overlay (light-on-light, dark-on-dark)
`barRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'full'`	`'full'`	Border radius for the outer container
`tabRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'full'`	`'full'`	Border radius for individual tabs
`shadow`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'none'`	Shadow style for the container
`leftSection`	`ReactNode`	—	Content to render at the start of the tab bar
`rightSection`	`ReactNode`	—	Content to render at the end of the tab bar
`className`	`string`	—	Additional CSS classes for the container
`tabClassName`	`string`	—	Additional CSS classes for each tab item

Compound Components

Tabs.Tab

Individual tab button with icon, badge, and color support

Prop	Type	Default	Description
`value`*	`string`	—	Unique value for the tab
`children`	`ReactNode`	—	Tab label content
`icon`	`ReactNode`	—	Optional icon element
`badge`	`string \| number \| ReactNode`	—	Badge content
`disabled`	`boolean`	`false`	Whether the tab is disabled
`color`	`ThemeColor`	—	Override color for this specific tab
`className`	`string`	—	Additional CSS classes for the tab

Tabs.Content

Content panel that shows when corresponding tab is active

Prop	Type	Default	Description
`value`*	`string`	—	Value matching the tab key
`children`	`ReactNode`	—	Panel content
`forceMount`	`boolean`	`false`	Keep content mounted when inactive
`className`	`string`	—	Additional CSS classes for the content panel

TabsSkeleton

Server-compatible loading skeleton for Tabs. Accepts same layout props as Tabs for perfect matching.

Prop	Type	Default	Description
`count`	`number`	`3`	Number of tab skeletons to show
`fullWidth`	`boolean`	`false`	Whether skeleton should take full width
`variant`	`'normal' \| 'subtle' \| 'strong' \| 'solid' \| 'none'`	`'subtle'`	Container variant to match
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant to match
`barRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'full'`	`'full'`	Bar radius to match
`tabRadius`	`'none' \| 'sm' \| 'default' \| 'lg' \| 'full'`	`'full'`	Tab radius to match
`align`	`'start' \| 'center' \| 'end' \| 'grow'`	`'center'`	Tab alignment to match
`hasLeftSection`	`boolean`	`false`	Show left section placeholder
`hasRightSection`	`boolean`	`false`	Show right section placeholder
`className`	`string`	—	Additional CSS classes