Vibe UI
Initializing Vibe UI System...
Vibe UI

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

Variations

Explore the 6 visual styles and positioning layouts available for the floating ThemeSwitcher widget.

1. Glassmorphism Styling

A frosted backdrop with glowing borders that integrates smoothly into clean design screens.

GLASS

Glassmorphic style button and drop-down menu.

2. Neon Glow Styling

An intense glow border highlight indicating active choices with ambient light drops.

GLOW

Neon glow borders and floating aura effects.

3. Retro Brutalist Styling

Bold flat-outlines and a hard offset drop shadow that fits nostalgic neobrutalist aesthetics.

RETRO

Retro brutalist switcher with thick outlines.

4. Cyberpunk Matrix Styling

Emerald scanline borders and custom monospaced elements styling.

CYBERPUNK

Cyberpunk interface styling with neon emerald lines.

5. Top Right Float Positioning

Configure alternate absolute placement layouts inside container zones.

DEFAULT

Positional offset variant floating in the top-right corner.

6. Interactive State Callback

Demonstrating parent callback hooks triggering reactive state layouts.

Interactive Custom Event LogTriggered callback: onThemeChange("default")
DEFAULT

Demonstrating target callbacks for custom application dashboards.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

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