open-index/open-npm huggingface dataset:
npm package: @mip-ui/theme-toggle
Description: React theme toggler component for switching between `light` and `dark` modes.   Part of the [`@mip-ui`](https://www.npmjs.com/org/mip-ui) component library.
Author: Dario Frison
Latest version: 0.1.7

# @mip-ui/theme-toogle

React theme toggler component for switching between `light` and `dark` modes.  
Part of the [`@mip-ui`](https://www.npmjs.com/org/mip-ui) component library.

---

## 📦 Installation

```bash
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:_**

```tsx
import { ThemeProvider } from "@mip-ui/theme-toogle";

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
```

**_2. Add the toggle button_**

```tsx
import { ModeToggle } from "@mip-ui/theme-toogle";

<ModeToggle />;
```

## 💡 Features

- 🌗 Switch between light and dark mode

- 💾 Saves preference in localStorage

- 🎨 Applies Tailwind class on <html> (dark or light)

- ⚙️ Simple API and customizable

- 🤝 Designed to work seamlessly with Tailwind CSS and Lucide Icons