A dark mode switch drawn as a tiny landscape: the sun sets behind the hills through a dusk sky while the moon and stars rise. Drag across it to scrub the time of day; release snaps to day or night.
Appearance
Click or drag the sun across the sky.
npx shadcn@latest add https://hyperblur.dev/r/micro-horizon-toggle.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-horizon-toggle.tsx.
import { MicroHorizonToggle } from "@/components/hyperblur/micro-horizon-toggle"
<MicroHorizonToggle onChange={(dark) => setTheme(dark ? "dark" : "light")} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled dark state. Pair with onChange. | |
| defaultChecked | boolean | false | Start at night when uncontrolled. |
| size | number | 48 | Height in pixels. The width is 2.25 times the height. |
| label | string | "Dark mode" | Accessible name of the switch. |
| disabled | boolean | false | Block interaction and dim the toggle. |
| onChange | (dark: boolean) => void | Called with true for night and false for day. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the switch button. |