ns-ui
iOS-style switch whose OFF state freezes over: seeded dendritic frost feathers creep in from the track edges over a frosted-glass film, with sparkle grain that glistens at idle; switching ON drives a melt front ahead of the sliding thumb with droplet run-off.
Use when an ordinary boolean setting in a settings list where the control should be an iOS-style pill with a soft decorative animation and no printed text legend; pick switch-eclipse instead when the switch specifically selects light versus dark, switch-solder-bead when the same control must also render partial ratios between its two sides, or consent-scope-redact when the toggles govern data scopes and switching one off should visibly redact the text it covers.
Install
npx shadcn add https://design.helpmarq.comns-ui / switch-frost — off freezes, on thaws
Cold-path controls for the storage tier. Switching off grows frost across the track; switching on melts it before the thumb slides.
Maintenance freeze
Halt scheduled jobs while the cluster compacts.
Cold storage
Archive inactive volumes to the glacier tier.
Telemetry
Stream node metrics to the control plane.
1 of 3 active
Click a switch or focus it and press Space. Regrowth is seeded, so each freeze traces a fresh dendrite pattern.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked? | boolean | — | controlled state; omit for uncontrolled |
| defaultChecked? | boolean | false | — |
| onCheckedChange? | (checked: boolean) => void | — | — |
| disabled? | boolean | false | — |
| className? | string | — | — |
| aria-label? | string | "Toggle" | — |