Next js

Next.js

Inertia.jsButton

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

Next Themes

Because you are using Next.js, you can use next-themes to implement dark mode. And since you're using @intentui/icons, you can use the IconSun and IconMoon icons.

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>
  )
}
Flexible blocks and templates
Use ready-made blocks to craft unique pages without starting from scratch.
blocks.intentui.com
Inertia.js
Button
Next.js / Intent UI