Dev Design LibraryReact Commerce Components
Dev Design Library indexes 116 React commerce components from 22 open-source UI libraries, with the most coming from FLX UI, Spectrum UI, Origin UI, ReactFrame and Shadcn Space. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React.
Comp 163Origin UI · React
AI CheckoutKokonut UI · ReactAn order the assistant puts together, paid without leaving the chat. The button fills while the charge runs, then the…
Banner TiersSpectrum UI · ReactA brutalist plan table whose featured column wears a blue banner on top.
Pricing SectionVengeance UI · ReactThree-tier pricing with a sliding billing switch, rolling prices, and accent-lit cards
Pricing ColumnLaunch UI · React
Aspect Ratio 06 - Product CardShadcn Space · ReactA product card using a 4:5 aspect ratio image with a discount badge and pricing details.
Denim Product Editorial CardOpenSourceUI · React
Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
LandingBoardUI · React
Pricing 01Componentry · ReactThree tactile pricing cards with revealed hover notes, clear feature lists, and a highlighted popular plan.
Pricing Section 01Tremor Blocks · React
Template EcommerceShark UI · React
Changeable Pricing SectionWatermelon UI · React
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.
Pricing SectionROI UI · ReactA pricing section with three plan cards.
PricingFLX UI · ReactHighlighted plan with a Popular badge and feature checklist.
Pricing comparison tableVelora UI · ReactGrouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.
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.
Product CardD2Studio UI · ReactE-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that…
Dice Discount PopupReactFrame · ReactA gamified discount popup, roll two animated 3D dice for a reward tier (with a doubles bonus), copy the code, and…
Comp 164Origin UI · React
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…
Blueprint TiersSpectrum UI · ReactA Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.
Pricing TiersVengeance UI · ReactMonochrome three-tier pricing with a dark featured card, mono labels, and an enterprise row
Pricing SectionLaunch UI · React
Calendar 15 - With PricingShadcn Space · ReactCalendar component
Retail Price Tag CardOpenSourceUI · React
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…
Pricing 02Componentry · ReactA compact pricing table with separated plan summaries, detailed feature lists, and an animated billing-cycle switch.
Pricing Section 02Tremor Blocks · React
Template LandingShark UI · React
Changeable Pricing Section BaseWatermelon UI · React
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.
ProductFLX UI · ReactSquare image with a sale badge, price, and add-to-cart.
Single plan pricingVelora UI · ReactOne all-inclusive plan card beside a benefit list and short reassurance answers.
Smart PricingPin UI · React
Pricing CardsD2Studio UI · ReactResponsive three-tier pricing cards with feature comparison and popular plan highlighting
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…
Comp 166Origin UI · React
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.
Empty CartSpectrum UI · ReactAn empty bag with three recently viewed products that add for real.
Card-03 - Product CardShadcn Space · ReactCard component
Ride Pickup WidgetOpenSourceUI · React
Paywalluselayouts · ReactA premium paywall component with a pick your price detent slider, animated numeric price transitions, and a segmented…
Pricing Section 03Tremor Blocks · React
Color Watch SelectorWatermelon UI · React
Pricing CalculatorUI Lab · ReactItemizes your bill like an invoice and upgrades the plan the moment your team crosses a seat threshold.
SelectableFLX UI · ReactClickable plan cards with a ring and check on the active one.
Three-tier pricingVelora UI · ReactThree plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
Eternal Glow CardReactFrame · ReactA hover-reveal product card with a blurred gradient overlay, staggered title/price/description reveal, a badge, and 5…
Comp 170Origin UI · React
Momentum RailKokonut UI · ReactA card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
Dark MatrixSpectrum UI · ReactA dark comparison table with dashed rows, mint checks, and per-plan CTA pills.
Card-14 - Ecommerce Product CardShadcn Space · ReactA clean editorial ecommerce product card with slide-up CTA, color swatches, sale badge, and wishlist.
Toggle Pricing CardsOpenSourceUI · React
Pricing Carduselayouts · ReactA focused pricing card layout with clear hierarchy.
Pricing Section 04Tremor Blocks · React
Pricing 1Watermelon UI · React
Pricing ToggleUI Lab · ReactEach digit rolls to its new price on its own, and new digits grow in.
Payment formFLX UI · ReactName on card, card number with icon, expiry, CVC, and country select fields with a pay button.
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…
Comp 259Origin UI · React
Gradient TiersSpectrum UI · ReactPastel gradient card headers with icons and color-coded inheritance labels.
Collapsible 07 - Order SummaryShadcn Space · ReactMobile checkout order summary that shows the total in the trigger and expands to items with quantities, subtotal…
Slide Subscribeuselayouts · ReactPick a billing period, then slide to start a trial.
Pricing Section 05Tremor Blocks · React
Pricing 2Watermelon UI · React
Size PickerUI Lab · ReactPulls a tee over a body outline so you see the fit before you pick the size.
Pricing tiersFLX UI · ReactStacked tier rows with Popular badge, price, and CTA button.
Product DetailReactFrame · ReactAn eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated…
Comp 328Origin UI · React
Offset TiersSpectrum UI · ReactStaggered serif panels on a dot grid, with one entry price and expert CTAs.
Drawer 02 - Shopping CartShadcn Space · ReactFloating right side drawer with a free shipping progress bar, editable cart items, product suggestions, and an order…
Pricing Section 06Tremor Blocks · React
Pricing 3Watermelon UI · React
Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
Product Grid SectionReactFrame · ReactA responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay…
Comp 329Origin UI · React
Product CardSpectrum UI · Reactcomponent for the Product Card
Dropdown Menu 04 - Shopping CartShadcn Space · ReactAn e-commerce cart dropdown that expands in place, with free-delivery progress, discounted prices, quantity controls…
Pricing Section 07Tremor Blocks · React
Pricing 4Watermelon UI · React
Change PlanFLX UI · ReactChange Plan for Manage Subscription.
Product ListReactFrame · ReactAn eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a…
Comp 47Origin UI · React
Receipt TiersSpectrum UI · ReactPlans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp.
Pricing 02 - Scalable Pricing TableShadcn Space · ReactA three tier pricing layout with a highlighted recommended plan, feature checklists, and clear CTAs, perfect for any…
Pricing Section 08Tremor Blocks · React
Pricing 5Watermelon UI · React
Cancel FlowFLX UI · ReactCancel Flow for Manage Subscription.
Sales Ticket PopupReactFrame · ReactA corner-anchored promo popup shaped like a torn event ticket, with 5 themes, a zigzag badge stub…
Comp 48Origin UI · React
Sales CTA FooterSpectrum UI · ReactA seat slider that prices a tier live, beside the link grid.
Sheet 03 - Shopping CartShadcn Space · ReactDrawer with products list, quantity controls, and sticky footer with total and checkout button
Pricing WidgetWatermelon UI · React
Card FormFLX UI · ReactCard Form for Payment.
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…
Comp 49Origin UI · React
Scratch CardSpectrum UI · ReactA scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a…
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 Widget BaseWatermelon UI · React
Saved MethodsFLX UI · ReactSaved Methods for Payment.
Spin to Win WheelReactFrame · ReactA gamified discount-capture widget where visitors spin a weighted SVG prize wheel for a reward, with five glass…
Comp 50Origin UI · React
Serif TiersSpectrum UI · ReactCream serif cards with a black featured card lit by a crimson glow.
Tabs 13 - Billing ToggleShadcn Space · ReactMonthly and yearly billing tabs with a savings badge and animated pricing cards.
Express WalletsFLX UI · ReactExpress Wallets for Payment.
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…
Tiered CardsFLX UI · ReactTiered Cards for Select a Plan.
Comparison TableFLX UI · ReactComparison Table for Select a Plan.
Audience SegmentsFLX UI · ReactAudience Segments for Select a Plan.
Usage SliderFLX UI · ReactUsage Slider for Select a Plan.
Spotlight RecommendationFLX UI · ReactSpotlight Recommendation for Select a Plan.