YuhuanStudioYunUIDocs
Buttons & Actions

Theme Toggle

A theme switcher dropdown (light / zinc-dark / true-black / system) backed by next-themes.

A theme switcher dropdown backed by next-themes. Clicking it opens a menu with four options — light, zinc-dark, true-black, and system — and the trigger animates a sun/moon swap to reflect the active theme. The host app provides the next-themes provider; this site already does, so the toggle below is live.

Import

import { ThemeToggle } from "@yuhuanowo/yunui";

Icon (default)

Icon variant

Pill

Pill variant

Props

PropTypeDefaultDescription
align"left" | "right"rightDropdown alignment: `left` or `right` (default).
classNamestringAdditional className
variant"icon" | "pill"iconVisual variant: `icon` (default, icon-only) or `pill`.

On this page