react-vibe-toggle

A premium React library to instantly transform the aesthetic of your entire website using one component.

Built for vibe coders, indie hackers, and creative builders.

This isn't just a dark mode switcher. It's an entire aesthetic transformation engine.

Features

• 7 Premium Aesthetics: Minimal, Neon, Hacker, Vaporwave, Midnight, Sunset, and Chaos.
• Zero Config Tailwind: CSS variable injections handle themes beautifully without large dependencies.
• Extremely Lightweight: Zero external UI libraries or bloated runtime.
• Persistent: Saves your users' preferred vibe out-of-the-box.
• Animations: Buttery smooth animated crossfades and vibe-specific background effects.

Installation

npm install react-vibe-toggle

Usage

Simply import the VibeToggle and render it inside your highest level file (like App.tsx or layout.tsx).

Basic Vibe

Lock your app to a specific vibe without a UI toggle wrapper.

import { VibeToggle } from 'react-vibe-toggle';

function App() {
  return (
    <>
      <YourApp />
      <VibeToggle defaultMode="vaporwave" headless />
    </>
  );
}

Full Vibe Selection Engine

Allow your users to completely shift the identity of your application.

import { VibeToggle } from 'react-vibe-toggle';

function App() {
  return (
    <>
      <YourApp />
      <VibeToggle 
        modes={["minimal", "neon", "hacker", "vaporwave", "midnight", "sunset", "chaos"]} 
        defaultMode="neon" 
        persist 
      />
    </>
  );
}

Styling Your Own Components

react-vibe-toggle dynamically modifies standard CSS custom properties that you can inherit in your own styles, to easily make your entire UI react instantly:

/* Custom CSS file inheriting variables */
.my-card {
  background: var(--vt-bg);
  color: var(--vt-text);
  border: 1px solid var(--vt-border);
  box-shadow: var(--vt-shadow);
  border-radius: var(--vt-radius);
  transition: var(--vt-transition); /* Automatic transition matching library settings */
}

You can seamlessly build massive scalable applications completely wrapped by react-vibe-toggle styling.

Available Modes

1. minimal (Clean, professional, bright)
2. neon (Dark, cyber, glowing purple/cyan accents)
3. hacker (Terminal-style dark mode with a raw feel)
4. vaporwave (Pink & purple waves with retro-quirky fonts)
5. midnight (Deep navy blue for late-night viewing)
6. sunset (Warm gradient themes and soft shadows)
7. chaos (Experimental jitter mode. Not for the faint of heart).