Black Friday: Save 40% on all plans with code BF2025UI
Next js

Next.js

Turning your Next.js app into a night owl? Follow this smooth guide to light up the dark mode magic.

Inertia.jsButton group

Next Themes

Because you are using Next.js, you can use next-themes to implement dark mode. And since you're using @heroicons/react, you can use the SunIcon and MoonIcon icons.

npm i next-themes @heroicons/react

Provider and Switcher

Next, you need to create a theme provider component. You can do it like this:

Loading source code...

Usage

After that, you can use it in your root layout file like so:

import { Providers } from '@/components/providers'

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks,patterns and polished templates crafted for you.
Inertia.js
Button group