ThemeSelector

Theme dropdown with system/light/dark options.

themesettingsdropdown

Import

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

Basic Usage

ThemeSelector Preview

Code

tsx

<ThemeSelector />

With Label

Show selected theme name

1<ThemeSelector variant="labeled" />

In Settings

Common settings pattern

1<div className="flex items-center justify-between">
2  <div>
3    <Label>Theme</Label>
4    <p className="text-sm text-muted-foreground">
5      Select your preferred theme
6    </p>
7  </div>
8  <ThemeSelector />
9</div>

Ready to use this component?

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

Start Configuring