USB
Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
CSS
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/checkbox-usbAbout this component
Connect a device, the way USB always goes: ticking pushes the plug at the port, it bumps the wrong way up, backs off, flips over and goes in, then the device's light comes on and a tick shows. Clearing pulls the plug out.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- 3D
- Keyframe
Techniques5
- Keyframes
- preserve-3d
- 3D transform
- Perspective
- stroke-dashoffset
Accessibility
Keyboard and screen readers
A native checkbox inside a <label>, so Space toggles it and the visible label names it; :focus-visible on the input outlines the scene.
Reduced motion
The plug goes straight in and the light comes on at once.
Use it in anything you build, commercial and client work included. Licence