ThemeToggle

Dark/light mode switch button.

themetogglesettings

Import

import { ThemeToggle } from "@/components/ui";

Basic Usage

ThemeToggle Preview

Icon

Button

Segmented

Code

tsx

<ThemeToggle />

Variants

Different toggle styles

1<div className="flex items-center gap-4">
2  <ThemeToggle variant="icon" />
3  <ThemeToggle variant="switch" />
4  <ThemeToggle variant="dropdown" />
5</div>

Sizes

Available sizes

1<div className="flex items-center gap-4">
2  <ThemeToggle size="sm" />
3  <ThemeToggle size="md" />
4  <ThemeToggle size="lg" />
5</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring