Tactile Switch

A switch that fills its stage, in four styles: a flat switch with a sprung knob in --primary (the default), a tactile slider whose track, knob and mono label come from the theme tokens, a refractive Three.js glass capsule, and a single-shader plasma trough. Every variant follows light and dark appearance automatically, works with keyboard and screen readers, and the WebGL variants react to the pointer. The WebGL variants pause off screen, and with reduced motion every variant snaps instead of animating.

Installation

CLI

npx @modus-ui/cli add tactile-switch

Manual

1. Install three.
2. Copy the code from the component tab.
3. Create a file at components/ui/tactile-switch.tsx.
4. Paste the code.

Usage

import { TactileSwitch } from "@/components/ui/tactile-switch";

export default function Example() {
  return (
    <div className="flex h-[400px] w-full">
      <TactileSwitch variant="glass" onChange={(on) => console.log(on)} />
    </div>
  );
}

Props