Vite

Vite

Got a Vite project? Let's flip the switch to dark mode and get that cool, sleek look in a snap. Here’s how to do it.

Starter Kit

If you want, you always use the starter kit to get started. You can find it Here.

Provider and Switcher

First of all, you need to install the @intentui/icons package.

npm i @intentui/icons

After that, we need two files: theme-provider.tsx and theme-switcher.tsx.

Loading source code...

Usage

Then you can wrap your app with the provider. For example if you are using Laravel with Inertia.js, you can put it inside your app.tsx like so:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ThemeProvider } from './components/theme-provider.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
)
Unlock the full power of
Design Intent UI
Build modern web apps faster with 400+ blocks and polished templates crafted for professionals.
Explore