RSVP
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-rsvpAbout this component
An RSVP checkbox with the guest list beside it: ticking pops your avatar in at the front of the stack, the other guests shuffle along to make room and the count of everyone else rolls from +12 to +13.
- Dependencies
- None
- Difficulty
- Beginner
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers4
- Click
- State change
- Spring
- Draw
Techniques4
- CSS transition
- Transition delay stagger
- SVG
- stroke-dashoffset
Accessibility
Keyboard and screen readers
A native checkbox inside a <label>, so Space toggles it and "I'm going" names it; the avatars and count are decoration. :focus-visible on the input outlines the box.
Reduced motion
Everything changes at once.
Use it in anything you build, commercial and client work included. Licence
More checkboxes
See allShippingMira Patel14 Harbour RoadBristol BS1 4QA