ns-ui
A binary switch drawn as an eclipse — a dark occluding disc slides across a bright sun disc inside a 56x28 track, forming a computed crescent at the midpoint and a thin corona ring once fully on, while the track's ambient tint darkens smoothly with occlusion.
Use when a light/dark theme toggle specifically, where the control's own artwork should say which mode it selects, a dark disc sliding across a bright one so both ends are self-evident without a printed legend or a swapped sun/moon icon; pick switch-frost for an ordinary iOS-pill boolean with a decorative animation, or switch-solder-bead when the value is a continuous allocation between two sides rather than a binary.
Install
npx shadcn add https://design.helpmarq.comns-ui / switch-eclipse
A dark disc eclipses a bright one — the crescent and corona are computed geometry, not sprite frames.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked? | boolean | — | — |
| defaultChecked? | boolean | — | — |
| onCheckedChange? | (checked: boolean) => void | — | — |
| aria-label? | string | — | accessible name; falls back to the visible Light/Dark label pair |
| className? | string | — | — |