Dark Mode ToggleDark Mode Toggle Dark
page.tsx
import DarkModeToggle from "@/components/dark-mode-toggle";
You can also set up the initial theme in the configuration file.

​
Properties

​
className
string
Custom CSS classes to apply to the component

​
Usage

Dark Mode Toggle Dark
example.tsx
import DarkModeToggle from "@/components/dark-mode-toggle";

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.