NEW
Products fly into the cart as discs; open it and they unfold into line items.
Checkout and cart animations
Payment moments with some life in them: a 3D card that fills in as you type, a card that turns into a receipt, a cart drawer things fly into.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
A live 3D card that fills in as you type and flips for the CVC.
These are front-end components for the moment someone pays or adds to cart. The card components format and check the card number, expiry and CVC as you type, and the pay button hands you the values so you can pass them to Stripe Elements, Lemon Squeezy or your own backend.
Each one comes as React (TypeScript, Tailwind CSS, Framer Motion) and as a single HTML file. Use them on a demo, a landing page or a real store.
Want all of them? The Shelf has every component in the catalogue for $29, once.
Questions
- Do these components process payments?
- No. They are the interface. Payment processing stays with your provider (for example Stripe), which you call from the onPay handler.
- Can I change the colours and currency?
- Yes. Colours are CSS variables or Tailwind classes, and amount and currency are props.