Dark Mode Toggle
page.tsx
import dynamic from "next/dynamic";
const DarkModeToggle = dynamic(() => import("@/components/DarkModeToggle"), {
	ssr: false,
});

You can also set up the initial theme in the configuration file.

​
Usage

Dark Mode Toggle Dark
example.tsx
import dynamic from "next/dynamic";
const DarkModeToggle = dynamic(() => import("@/components/DarkModeToggle"), {
	ssr: false,
});

export default function Example() {
	return (
		<div className="flex justify-center items-center h-screen">
			<DarkModeToggle />
		</div>
	);
}

The Dark Mode Toggle component creates a button that allows users to switch between light and dark themes. It automatically handles the theme change and updates the button’s icon to reflect the current theme.

If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.

Was this page helpful?

CTAFAQ