ns-ui
A boolean switch rendered as two liquid solder beads on a hairline rail, trading mass through a gooey neck that bulges, stretches and pinches off on toggle — with a ratio prop for rendering any partial allocation, not just on/off.
Use when a two-sided allocation rather than a plain binary, since the ratio prop renders any split of mass between the left and right beads and the on/off case is just the extremes; pick switch-frost instead for an on/off setting with no intermediate values to express, or switch-eclipse for a light/dark theme toggle.
Install
npx shadcn add https://design.helpmarq.comns-ui / switch-solder-bead
off — 90% routed left
ratio=0.35 — partial allocation
Click or press Space to toggle. Mass melts across the neck and pinches off; the ratio prop renders any partial split directly.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked? | boolean | — | — |
| defaultChecked? | boolean | — | — |
| onCheckedChange? | (checked: boolean) => void | — | — |
| ratio? | number | — | Fraction (0-1) of mass in the right bead. Overrides the checked-derived default. |
| disabled? | boolean | — | — |
| aria-label? | string | — | — |
| className? | string | — | — |