Switch
Switch is a neobrutalist React component from Cruise UI. An on/off toggle for settings that take effect straight away. Install it with npx shadcn@latest add @cruiseui/switch.
Install
Terminal
npx shadcn@latest add @cruiseui/switchFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
import { CruiseSwitch } from "@/components/cruise/switch";
export default function SwitchExample() {
return (
<div className="flex flex-col">
<CruiseSwitch label="Order updates by SMS" defaultChecked showState />
<CruiseSwitch label="Email newsletter" showState />
<CruiseSwitch label="Two-step sign-in (coming soon)" disabled />
</div>
);
}
<button type="button" class="switch" role="switch" aria-checked="false">
<span class="switch-track" aria-hidden="true"><span class="switch-knob"></span></span>
<span>Order updates by SMS</span>
<span class="switch-state" aria-hidden="true">Off</span>
</button>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Settings that apply immediately: notifications, dark mode.
When not to
Inside a form that is submitted later (use a Checkbox).
Props
CruiseSwitch
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | — |
checked? | boolean | — | — |
defaultChecked? | boolean | false | — |
onCheckedChange? | ((checked: boolean) => void) | — | — |
showState? | boolean | false | Show "On" / "Off" after the label (state not by colour alone). |
disabled? | boolean | — | — |
className? | string | — | — |
Accessibility
- <button role="switch"> with aria-checked; Space and Enter toggle it.
- The knob position changes too, so the state never relies on colour alone.