How do I install the Vibe UI Theme Switcher component?

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

Does Vibe UI Theme Switcher support Tailwind CSS v4?

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

Is the Vibe UI Theme Switcher component accessible?

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

Theme Switcher

A floating, interactive visual customizer widget that lets users switch active design themes (Glass, Retro, Cyberpunk, Glow) dynamically across Vibe UI components.

Theme Switcher

A floating, interactive visual customizer widget that lets users switch active design themes (Glass, Retro, Cyberpunk, Glow) dynamically across Vibe UI components.

Preview

DEFAULT

Standard preset swapper located bottom-right.

Installation

pnpm dlx vibe-ui-kit@latest add theme-switcher dropdown-menu

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: dropdown-menu

Variations

Explore the visual styles, positioning layouts, and interactive state triggers available for the floating ThemeSwitcher widget.

Glassmorphic Style

GLASS

Glassmorphic style button and drop-down menu.

Neon Glow Style

GLOW

Neon glow borders and floating aura effects.

Retro Brutalist Style

RETRO

Retro brutalist switcher with thick outlines.

Cyberpunk Matrix Style

CYBERPUNK

Cyberpunk interface styling with neon emerald lines.

Props

Prop	Type	Default	Description
defaultTheme	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The initially selected active visual preset.
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The aesthetic design variation of the control button and menu.
onThemeChange	(theme: VibeTheme) => void	undefined	Callback function triggered when the user switches to a different visual preset.