Vibe UI
Initializing Vibe UI System...

Tabs

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

Tabs

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

Preview

Account

Make changes to your account here.

Installation

pnpm dlx vibe-ui-kit@latest add tabs

Variants

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...

Props

Tabs

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'The visual aesthetic theme layout shared with list triggers.
defaultValuestringundefinedThe value of the tab that should be active when initially rendered.
valuestringundefinedThe controlled value of the active tab.
onValueChange(value: string) => voidundefinedCallback fired when the active tab value changes.
orientation'horizontal' | 'vertical''horizontal'The orientation of the tab components.

TabsTrigger

PropTypeDefaultDescription
valuestringundefinedA unique value that associates the trigger with a content panel.
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk'Context inheritedOverride the theme style variation inherited from Tabs.
disabledbooleanfalseWhen true, prevents the user from interacting with the tab trigger.

Contributors

Theme Customizer

8px
@theme { --radius: 0.5rem; --glass-blur: 8px; }
Changes apply instantly to this documentation workspace.