A mechanical I/O rocker that tilts in perspective, presses deeper under the pointer and lights a flickering status LED. Press the side you want, like the real thing.
npx shadcn@latest add https://hyperblur.dev/r/micro-rocker-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-rocker-switch.tsx.
import { MicroRockerSwitch } from "@/components/hyperblur/micro-rocker-switch"
<MicroRockerSwitch label="Monitor amp" onChange={(on) => console.log(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. Pair with onChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| label | string | "Power" | Name shown next to the switch, and the accessible name when the status is hidden. |
| onLabel | string | "On" | Status text when on. |
| offLabel | string | "Off" | Status text when off. |
| showStatus | boolean | true | Show the label and LED status next to the rocker. |
| size | number | 56 | Height of the rocker in pixels. The width follows. |
| accent | string | "#ff6a3d" | LED, glyph glow and focus ring color. |
| disabled | boolean | false | Block interaction and dim the switch. |
| onChange | (checked: boolean) => void | Called with the new state. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the switch button. |