B.99
clickkeyboardspringmotion
Pricing Toggle
Pricing cards with a monthly / yearly switch, digit-rolling prices, savings badges and Intl currency formatting.
Cards & Containers · React / Motion / Tailwind
Commerce Essentials
From browsing to checkout, without friction.
Commerce interfaces earn trust in small details: prices that change without jumping, quantities that are easy to adjust, card fields that format as you type, and product images you can inspect closely. Nothing here processes payments — these are the interface layers, built to be honest and accessible.
- F.143keyboardfocusspringmotion
Card Input
Payment card fields with brand detection, live formatting, Luhn checks and a card preview that flips for the CVC.
Forms & Inputs · React / Motion / Tailwind
- A.65pressclickspringmotion
Number Stepper
A numeric field with − / + buttons, accelerating hold-to-repeat, rolling digits and an elastic bump at the limits.
Buttons & Controls · React / Motion / Tailwind
- F.55hoverclickspringmotion
Rating Input
An accessible star rating built on native radios, with hover preview, half steps and a particle pop.
Forms & Inputs · React / Motion / Tailwind
- B.40dragpointerspringmotion
Compare Slider
A before / after comparison with a draggable, keyboard-operable divider revealed by clip-path.
Cards & Containers · React / Motion / CSS / Tailwind
- B.67clickkeyboardtweenzero deps
Zoom Image
Click an image to zoom it from its exact on-page position to fit the viewport, in a native modal dialog.
Cards & Containers · React / CSS / Tailwind
- G.119viewporttweenmotion
Countdown
A countdown to a date with rolling digits, progress rings, localised unit labels and a hydration-safe start.
Data & Feedback · React / Motion / SVG / Tailwind
- F.145hoverclickspringmotion
Feedback Scale
A five-step satisfaction scale with drawn faces that morph as you hover, a follow-up comment and a thank-you state.
Forms & Inputs · React / Motion / SVG / Tailwind
- F.173clickkeyboardspringmotion
Variant Picker
Colour swatches and size buttons as radiogroups that derive availability, stock and price deltas from your variants.
Forms & Inputs · React / Motion / Tailwind
- B.157scrolldragscroll-linkedzero deps
Snap Carousel
An accessible carousel on native CSS scroll-snap with peeking slides, dot or thumbnail pickers and pausable autoplay.
Cards & Containers · React / CSS / Tailwind
- F.174clickkeyboardspringmotion
Chip Select
Filter and interest chips with a springy check-in, select all / clear, a max with feedback and a +N more collapse.
Forms & Inputs · React / Motion / Tailwind
- A.186clickpressspringmotion
Add to Cart Button
Throws the product along a parabola into the cart, bumps it, rolls the badge and confirms with a check.
Buttons & Controls · React / Motion / SVG / Tailwind
- B.190clickdragtweenzero deps
Lightbox Gallery
A thumbnail grid that opens a full-screen <dialog> lightbox: FLIP from the thumbnail, swipe, pinch / double-click zoom and a thumbnail strip.
Cards & Containers · React / CSS / Tailwind
- F.203keyboardfocuszero deps
Phone Input
An international phone field with a searchable country list, as-you-type formatting and paste-to-detect E.164 numbers.
Forms & Inputs · React / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVG
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Pricing Toggle documentation
- Card Input documentation
- Number Stepper documentation
- Rating Input documentation
- Compare Slider documentation
- Zoom Image documentation
- Countdown documentation
- Feedback Scale documentation
- Variant Picker documentation
- Snap Carousel documentation
- Chip Select documentation
- Add to Cart Button documentation
- Lightbox Gallery documentation
- Phone Input documentation