Switch

A hand-drawn Base UI switch styled with shadcn conventions. Use it for a setting that applies immediately.

Switch
Every hand-drawn switch size and state.
Sizes
Checked
Invalid
Disabled

Installation

npx shadcn@latest add https://sketchcn.chuwii.com/r/switch.json

Styles

Switch leans on these rules from sketch.css. The shadcn CLI installs the file with sketch-provider; copying the component by hand means copying them too.

[data-sketch-outline] path[fill]:not([fill="none"]) {
  fill: var(--sketch-fill);
  fill-opacity: var(--sketch-fill-opacity, 1);
  transition:
    fill 150ms ease,
    fill-opacity 150ms ease;
}

Read the whole file for the drawing variables, paper textures and reduced-motion rules.

Usage

import { Switch } from "@/components/ui/switch";

export function SketchMode() {
  return <Switch aria-label="Sketch mode" defaultChecked />;
}

Props

PropTypeDefaultDescription
size"sm" | "default""default"Track and thumb size.

Everything else, including the checked state props, is forwarded to the Base UI Switch.Root primitive. The component also exports switchVariants and SWITCH_SIZES.

Examples

Settings row

Redraw every outline with a hand-drawn wobble.
import { Switch } from "@/components/ui/switch";

export function SettingRow() {
  const id = useId();

  return (
    <div className="flex w-full items-center justify-between gap-4">
      <div className="flex flex-col">
        <label htmlFor={id} className="text-sm">
          Rough edges
        </label>
        <span className="text-muted-foreground text-xs">
          Redraw every outline with a hand-drawn wobble.
        </span>
      </div>
      <Switch id={id} defaultChecked />
    </div>
  );
}

Controlled

Autosave is on
import { Switch } from "@/components/ui/switch";

export function AutosaveToggle() {
  const [autosave, setAutosave] = useState(true);

  return (
    <div className="flex items-center gap-3">
      <Switch
        checked={autosave}
        onCheckedChange={setAutosave}
        aria-label="Autosave"
      />
      <span className="text-sm">
        Autosave is {autosave ? "on" : "off"}
      </span>
    </div>
  );
}