@mip-ui/theme-toogle

React theme toggler component for switching between light and dark modes.
Part of the @mip-ui component library.

📦 Installation

pnpm add @mip-ui/theme-toogle lucide-react react

@mip-ui/theme-toogle requires the following peer dependencies:

• react >=19

• lucide-react >=0.484.0

• tailwindcss v4

🔧 Usage

1. Wrap your app with the ThemeProvider:

import { ThemeProvider } from "@mip-ui/theme-toogle";

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

2. Add the toggle button

import { ModeToggle } from "@mip-ui/theme-toogle";

<ModeToggle />;

💡 Features

• 🌗 Switch between light and dark mode

• 💾 Saves preference in localStorage

• 🎨 Applies Tailwind class on (dark or light)

• ⚙️ Simple API and customizable

• 🤝 Designed to work seamlessly with Tailwind CSS and Lucide Icons