Vibe UI
Initializing Vibe UI System...

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

PropTypeDefaultDescription
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) => voidundefinedCallback function triggered when the user switches to a different visual preset.

Contributors

Theme Customizer

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