How do I install the Vibe UI Tabs component?

You can install Tabs into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add tabs" in your terminal.

Does Vibe UI Tabs support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your account here.

Name

Username

pnpm dlx vibe-ui-kit@latest add tabs

Vibe UI's Tabs component supports multiple rich aesthetic presets to match your application's design system:

Glassmorphic

Glassmorphic preview card panel content.

Retro Neobrutalism

Retro panel 1 card content.

Glow Accent

Glow active settings card panel.

Cyberpunk

root@system:~# INITIALIZING CORE SYSTEM PANEL...

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual aesthetic theme layout shared with list triggers.
defaultValue	string	undefined	The value of the tab that should be active when initially rendered.
value	string	undefined	The controlled value of the active tab.
onValueChange	(value: string) => void	undefined	Callback fired when the active tab value changes.
orientation	'horizontal' \| 'vertical'	'horizontal'	The orientation of the tab components.

Prop	Type	Default	Description
value	string	undefined	A unique value that associates the trigger with a content panel.
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	Context inherited	Override the theme style variation inherited from Tabs.
disabled	boolean	false	When true, prevents the user from interacting with the tab trigger.