Cursor type
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/radio-cursor-typeAbout this component
A cursor picker that shows each cursor where it belongs on a little panel: the cursor glides to its spot and turns into it, the arrow resting on empty space, the hand lighting the button, the I-beam in the text with a caret blinking.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- Click
- State change
- Icon swap
Techniques4
- SVG
- CSS transition
- Keyframes
- Transform only
Accessibility
Keyboard and screen readers
A role="radiogroup" with an aria-label around native radio inputs sharing one name, so the arrow keys move the choice and Tab enters the group once; :focus-visible on the input outlines its option.
Reduced motion
The cursor jumps to its spot and the caret does not blink.
Use it in anything you build, commercial and client work included. Licence