Dev Design LibraryAnimated Commerce Components
Dev Design Library indexes 42 Animated commerce components from 13 open-source UI libraries, with the most coming from ReactFrame, uselayouts, UI Lab, Shadcn Space and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the commerce components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
AI CheckoutKokonut UI · ReactAn order the assistant puts together, paid without leaving the chat. The button fills while the charge runs, then the…
Empty CartSpectrum UI · ReactAn empty bag with three recently viewed products that add for real.
Pricing SectionVengeance UI · ReactThree-tier pricing with a sliding billing switch, rolling prices, and accent-lit cards
Drawer 02 - Shopping CartShadcn Space · ReactFloating right side drawer with a free shipping progress bar, editable cart items, product suggestions, and an order…
Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
Pricing 02Componentry · ReactA compact pricing table with separated plan summaries, detailed feature lists, and an animated billing-cycle switch.
Pricing Foursv-efferd · SvelteAn animated pricing table with monthly-yearly toggles, live number transitions, and motion badges.
Billing toggleArc Library · ReactA monthly and yearly switch with a savings badge and prices that roll to the new amount.
Coupon CodeUI Lab · ReactStamps your promo code onto the order and strikes out the price it beat.
Three-tier pricingVelora UI · ReactThree plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
Odometer PricingPin UI · React
Add to CartSkecher UI · ReactAn interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.
Dice Discount PopupReactFrame · ReactA gamified discount popup, roll two animated 3D dice for a reward tier (with a doubles bonus), copy the code, and…
AI Order StatusKokonut UI · ReactA live delivery card in the reply. The courier moves along the route while the ETA counts down, and the route turns…
Scratch CardSpectrum UI · ReactA scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a…
Pricing TiersVengeance UI · ReactMonochrome three-tier pricing with a dark featured card, mono labels, and an enterprise row
Dropdown Menu 04 - Shopping CartShadcn Space · ReactAn e-commerce cart dropdown that expands in place, with free-delivery progress, discounted prices, quantity controls…
Holographic Referral Carduselayouts · ReactA dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet…
Plan comparisonArc Library · ReactCompare meaningful differences between plans and billing periods.
Order TrackerUI Lab · ReactDrives a parcel across a street map to your door and stamps each stop as it arrives.
Smart PricingPin UI · React
Dice Roll Discount PopupReactFrame · ReactA gamified discount-capture widget where visitors roll two 3D dice for a reward tier, with a themed reveal modal and…
Throw DeckKokonut UI · ReactA pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view.
Pricing 02 - Scalable Pricing TableShadcn Space · ReactA three tier pricing layout with a highlighted recommended plan, feature checklists, and clear CTAs, perfect for any…
Paywalluselayouts · ReactA premium paywall component with a pick your price detent slider, animated numeric price transitions, and a segmented…
Pricing CalculatorUI Lab · ReactItemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
Eternal Glow CardReactFrame · ReactA hover-reveal product card with a blurred gradient overlay, staggered title/price/description reveal, a badge, and 5…
Momentum RailKokonut UI · ReactA card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
Slider 05 - Price Range FilterShadcn Space · ReactA dual-thumb price range filter slider with a hover ghost preview — hover outside the selected range to see a…
Pricing Carduselayouts · ReactA focused pricing card layout with clear hierarchy.
Pricing ToggleUI Lab · ReactEach digit rolls to its new price on its own, and new digits grow in.
Image ShowcaseReactFrame · ReactA product-style image viewer, a large main frame with prev/next arrows and an image counter, backed by a click-to-jump…
Tabs 13 - Billing ToggleShadcn Space · ReactMonthly and yearly billing tabs with a savings badge and animated pricing cards.
Slide Subscribeuselayouts · ReactPick a billing period, then slide to start a trial.
Size PickerUI Lab · ReactPulls a tee over a body outline so you see the fit before you pick the size.
Product DetailReactFrame · ReactAn eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated…
Product Grid SectionReactFrame · ReactA responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay…
Product ListReactFrame · ReactAn eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a…
Sales Ticket PopupReactFrame · ReactA corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub…
Scratch Card PopupReactFrame · ReactA gamified scratch-to-win popup, drag to scratch a gold-foil canvas off a 3x3 icon grid, match three to win a reward…
Spin to Win WheelReactFrame · ReactA gamified discount-capture widget where visitors spin a weighted SVG prize wheel for a reward, with five glass…
Your Cart PageReactFrame · ReactA three-step eCommerce flow in one block: a cart with quantity steppers and promo code, a checkout form with an order…