A compact labelled switch like SND ON with bracket corners, a status dot and a flash on every click.
npx shadcn@latest add https://hyperblur.dev/r/hud-toggle-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-toggle-switch.tsx.
import { HudToggleSwitch } from "@/components/hyperblur/hud-toggle-switch"
<HudToggleSwitch label="Snd" onChange={(on) => console.log(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Snd" | Short label before the state. |
| checked | boolean | Controlled state. Pair with onChange. | |
| defaultChecked | boolean | true | Initial state when uncontrolled. |
| onChange | (checked: boolean) => void | Called with the new state on every click. | |
| onLabel | string | "On" | State text when on. |
| offLabel | string | "Off" | State text when off. |
| accent | string | "#ff4d4d" | Dot, border and flash color when on. |