React eCommerce Components
ReactFrame has 61 React components for online stores (59 free): a product listing with filters, product grids, a full product page, a cart-to-checkout flow, colour and size pickers, a card number field, an animated pay button, product image viewers and a promotional hero slider.
How to choose
- The shop page: product-list for a grid with a filter sidebar, product-grid-section for a simpler featured grid.
- The product page: product-detail, or image-showcase and hotspot-carousel for the images alone; variant-swatches for colour and size.
- Cart and checkout: your-cart-page, with credit-card-input and payment-button if you build your own payment step.
- Sales and launches: hero-slider-carousel at the top of the home page.
All 61 components
- Product ListFree
- An eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a responsive photo grid with New and Sale badges.
- npx shadcn@latest add https://reactframe.com/r/product-list.json
- Product Grid SectionFree
- A responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay, category/price meta row, optional badge, and a centered CTA button below the grid.
- npx shadcn@latest add https://reactframe.com/r/product-grid-section.json
- Product DetailFree
- An eCommerce product page block with a switchable image gallery, color and size pickers, quantity stepper, animated add-to-cart button and Description / Specs / Reviews tabs.
- npx shadcn@latest add https://reactframe.com/r/product-detail.json
- Your Cart PageFree
- A three-step eCommerce flow in one block: a cart with quantity steppers and promo code, a checkout form with an order summary, and an animated order-confirmed screen.
- npx shadcn@latest add https://reactframe.com/r/your-cart-page.json
- Variant SwatchesFree
- Product option pickers for colour and size: round colour swatches with a ring that glides to the pick, size chips with a sliding fill, the chosen value named in the label, sold-out options struck through, and a low-stock warning when only a few are left.
- npx shadcn@latest add https://reactframe.com/r/variant-swatches.json
- Credit Card InputFree
- A grouped card number, expiry and CVC field: brand detection with an animated mark, 4-4-4-4 or Amex 4-6-5 spacing, Luhn and expiry checks, and focus that moves on as each part is complete.
- npx shadcn@latest add https://reactframe.com/r/credit-card-input.json
- Payment ButtonFree
- A pay button that shows every step of a payment: the amount, a spinner while it processes, a drawn tick when it's paid, a shake and a clear message when a card is declined, and an optional press-and-hold mode that fills up before it charges.
- npx shadcn@latest add https://reactframe.com/r/payment-button.json
- Image ShowcaseFree
- A product-style image viewer, a large main frame with prev/next arrows and an image counter, backed by a click-to-jump thumbnail strip and a reset-to-first button.
- npx shadcn@latest add https://reactframe.com/r/image-showcase.json
- Hotspot CarouselPremium
- A product image carousel with clickable annotated hotspots, thumbnail strip, captions, autoplay, and a keyboard-accessible fullscreen lightbox.
- Hero Slider CarouselPremium
- An e-commerce hero slider with split and full-width slide layouts, badges, CTA buttons, Ken Burns effect, ring-progress indicators, and swipe/keyboard navigation.
- Product Highlight BlockFree
- A featured product spotlight: a large photo with numbered hotspots that pulse and sync with a feature list, a floating caption card, rating, key stats, an optional add-on, an animated price and an add-to-cart button with loading and added states.
- npx shadcn@latest add https://reactframe.com/r/product-highlight-block.json
- Category Grid BlockFree
- A bento grid of shop categories: one large feature tile, wide and small tiles with product photos on a light surface, product counts and starting prices, badges like 'New season' or 'Up to 40% off', subcategory chips, hover zoom and a rotating arrow, plus an 'All products' link.
- npx shadcn@latest add https://reactframe.com/r/category-grid-block.json
- Promo Banner BlockFree
- A sale banner for store pages: a big headline that rises in word by word, a copyable discount code, a shop button, a live countdown to a real end date (hidden after it ends), terms, and a collage of product photos that drifts with the pointer next to a springy '40% off' sticker.
- npx shadcn@latest add https://reactframe.com/r/promo-banner-block.json
- Trust Badges BlockFree
- A store reassurance strip: shipping, returns, warranty and secure checkout badges with icons that draw themselves, each opening the three facts behind the promise, plus an overall rating with partially filled stars and the accepted payment types shown as neutral icons.
- npx shadcn@latest add https://reactframe.com/r/trust-badges-block.json
- Related Products BlockFree
- A 'You may also like' product row: tabs for similar items and complete-the-setup picks, a snap-scrolling carousel with arrow buttons and a scroll progress bar, sale and new badges, wishlist hearts, quick add on hover with a running bag count, prices and ratings.
- npx shadcn@latest add https://reactframe.com/r/related-products-block.json
- Product Quick View BlockFree
- A product grid with quick view: hover a card for a 'Quick view' button that opens a dialog with an image gallery, rating, price, color and size choices, quantity and add to cart, plus previous / next to browse the grid without closing it.
- npx shadcn@latest add https://reactframe.com/r/product-quick-view-block.json
- Checkout Form BlockFree
- A one-page checkout: contact, delivery with shipping method cards (address fields fold away for pickup), card payment with live formatting and checksum validation, inline errors after blur, discount codes, a sticky order summary with a counting total (collapsible on phones) and a processing → confirmed flow.
- npx shadcn@latest add https://reactframe.com/r/checkout-form-block.json
- Order Summary BlockFree
- An editable order summary card: line items with thumbnails, quantity steppers, struck-through original prices and remove with undo, 'show more' for long orders, a gift-wrap option with a note, a delivery estimate worked out in business days, collapsible price details, a counting total and a savings callout.
- npx shadcn@latest add https://reactframe.com/r/order-summary-block.json
- Gift Card BlockFree
- A digital gift card section: a live card preview that tilts with the pointer and updates as you type, four code-drawn designs, preset and custom amounts with limits, recipient, sender, send-now-or-later and a message, add to cart, plus a 'Check balance' tab.
- npx shadcn@latest add https://reactframe.com/r/gift-card-block.json
- Product Carousel BlockFree
- A featured product carousel: one product per slide with a big title, specs, price and shop button, photos that glide in, autoplay with filling progress bars (pauses on hover, focus or the pause button), swipe and drag, arrow keys and prev / next buttons.
- npx shadcn@latest add https://reactframe.com/r/product-carousel-block.json
- Mini Cart DrawerFree
- A slide-in cart drawer with a store header and product row: adding a product bumps the bag count and opens the drawer, which shows a free-shipping progress bar, line items with steppers (the last one becomes a remove), a 'goes well with' upsell, an animated subtotal and checkout.
- npx shadcn@latest add https://reactframe.com/r/mini-cart-drawer.json
- Product Filters SidebarFree
- A collection page with a filter sidebar: collapsible groups for category with live counts, a dual-handle price range over a price histogram, color swatches, minimum rating, in-stock and on-sale switches, removable active-filter chips, sorting, a result count and a grid that updates instantly (a toggle panel on phones).
- npx shadcn@latest add https://reactframe.com/r/product-filters-sidebar.json
- Coupon Code BlockFree
- A discount code card: type a code (validated with a spinner, shaking with a clear message when invalid or below its minimum spend) or pick one of the available coupon tickets, with a 'Best value' tag, locked coupons that say how much more to add, an applied ticket with a confetti pop, and totals that count down.
- npx shadcn@latest add https://reactframe.com/r/coupon-code-block.json
- Order Bump BlockFree
- A checkout order bump: the main item plus one-time add-on offers in dashed boxes with a pulsing arrow and a passing shine, a checkbox that draws its check, discounted prices, option pills that unfold once added, summary lines that fold in, a counting total and a savings note.
- npx shadcn@latest add https://reactframe.com/r/order-bump-block.json
- Free Shipping Progress BarFree
- A tiered cart reward bar: free shipping, a free gift and free express milestones on one striped progress track, a message that says exactly how much more to add, milestone icons that pop when reached, an unlocked toast and 'close the gap' add-ons that pick the cheapest item that gets you there.
- npx shadcn@latest add https://reactframe.com/r/free-shipping-progress-bar.json
- Upsell / Cross-sell BlockFree
- A post-add offer screen: choose between your pick and a highlighted upgrade with a side-by-side spec table that follows the choice, add accessories at a bundle discount with struck-through prices, and watch the total and savings update before adding everything to the cart.
- npx shadcn@latest add https://reactframe.com/r/upsell-cross-sell-block.json
- Incentives BlockFree
- A 'why shop with us' section: a scrolling ticker of store perks, a headline, and four incentive cards (shipping, returns, recycled packaging, support) with code-drawn illustrations that come alive on hover, a big stat, a short explanation and a link.
- npx shadcn@latest add https://reactframe.com/r/incentives-block.json
- Order History BlockFree
- An account orders page: status tabs with counts, search by order number or product, order cards with stacked thumbnails and colored status pills (a pulsing dot for orders on the way), expandable details with a delivery progress timeline, tracking number, line items and actions to track, buy again, return, cancel or download the invoice.
- npx shadcn@latest add https://reactframe.com/r/order-history-block.json
- Product Features BlockFree
- A product feature tour: a vertical list of features with progress bars that autoplay through them, a large photo that crossfades and slowly zooms toward the part being described, a floating stat card, and a compact spec grid underneath.
- npx shadcn@latest add https://reactframe.com/r/product-features-block.json
- Product Reviews BlockFree
- A product review list: average rating, sorting, filter chips for photos, star level and the topics people mention most, review cards with verified badges, purchased variant, read more, photos, store replies and a helpful vote, plus 'show more' paging.
- npx shadcn@latest add https://reactframe.com/r/product-reviews-block.json
- Store NavigationFree
- A complete store header: a dismissible announcement bar, a mega menu with link columns and a featured product per category, an expanding search with trending terms and live product suggestions, wishlist and bag counts, and a slide-in mobile menu with accordion sections.
- npx shadcn@latest add https://reactframe.com/r/store-navigation.json
- Welcome Offer ModalFree
- A first-visit welcome modal in three steps: pick one of three welcome perks (discount, free express shipping or a free gift), enter an email, then reveal a copyable code, with a split photo layout, progress bar, and calm exits.
- npx shadcn@latest add https://reactframe.com/r/welcome-offer-modal.json
- Cart Offer ModalFree
- An add-to-cart modal with a mix-and-match deal: it confirms the item, shows how many more to add for the next discount tier on a progress track, lets shoppers add picks right in the modal with prices already discounted, and counts the savings and total as tiers unlock.
- npx shadcn@latest add https://reactframe.com/r/cart-offer-modal.json
- Newsletter Discount ModalFree
- A newsletter sign-up popup with a first-order discount: a sample issue on paper, weekly or drops-only frequency, interest chips and an email field, then a stamped letter and a perforated coupon ticket with copy, apply to cart and an expiry countdown, plus a corner teaser if it's dismissed.
- npx shadcn@latest add https://reactframe.com/r/newsletter-discount-modal.json
- Category CarouselFree
- A shop-by-category row of round photo bubbles that scrolls, drags and snaps, with arrows, a scroll progress bar, New badges and a Sale bubble; picking a category slides a ring onto it and swaps in that category's products with quick add buttons.
- npx shadcn@latest add https://reactframe.com/r/category-carousel.json
- Featured Categories BannerFree
- A banner of expanding category panels: the open one grows to show its photo, headline, tagline, product count and a Shop button while the others shrink to vertical labels, rotating on a timer with a progress line that pauses on hover; on phones it becomes a vertical accordion.
- npx shadcn@latest add https://reactframe.com/r/featured-categories-banner.json
- Icon Category NavFree
- A store category bar of line icons with labels that keeps as many categories as fit and folds the rest into a More menu as the width changes, with a little hover animation per icon, a sliding underline on the current category and a subcategory strip below.
- npx shadcn@latest add https://reactframe.com/r/icon-category-nav.json
- Tabbed Product ListFree
- A product grid with Best sellers, New arrivals, On sale and Top rated tabs: each tab sorts the products its own way and shows its own badge and detail line, cards reshuffle into place when you switch, with a hover quick add bar, a wishlist heart and Show more.
- npx shadcn@latest add https://reactframe.com/r/tabbed-product-list.json
- Masonry Product GridFree
- A Pinterest-style product wall of mixed-height photos with a collection card, customer quotes and a shipping note woven in, category filters that reflow the columns with animation, a Cozy / Compact density switch, wishlist hearts and a hover bar to add to cart.
- npx shadcn@latest add https://reactframe.com/r/masonry-product-grid.json
- Product List View (Rows)Free
- A product list laid out as rows: photo, blurb, spec chips, stars and live stock, price with the old price, a quantity stepper and add to cart, wishlist hearts, expandable details, a compare checkbox that fills a tray, sorting and a comfortable / compact density switch.
- npx shadcn@latest add https://reactframe.com/r/product-list-rows.json
- Mini Cart DropdownFree
- A store header with a cart icon that opens a dropdown cart: badge that bumps on add, free-shipping progress, line items with quantity steppers and remove with undo, subtotal, view cart and checkout; adding from the picks below opens it, highlights the new line and closes it again after a few seconds.
- npx shadcn@latest add https://reactframe.com/r/mini-cart-dropdown.json
- Cart ModalFree
- A product with a size picker whose Add to cart opens a centered cart modal: an Added to your cart header, line items with quantity steppers, complete-the-set add-ons, a discount code field, totals and checkout, with focus trap, Escape and click-outside to close.
- npx shadcn@latest add https://reactframe.com/r/cart-modal.json
- Express Checkout ButtonsFree
- An express checkout card with wallet, saved card, pay-in-4 and bank buttons above a continue-with-email field; each opens a payment sheet with the method's details (card, instalment plan or bank choice), shipping address and speed, the total and a confirm button that shows progress and success.
- npx shadcn@latest add https://reactframe.com/r/express-checkout-buttons.json
- Multi-step Checkout BlockFree
- A four-step checkout in one card: a stepper whose connectors fill as you go, contact and address with country-aware postcode checks, delivery options, card payment with brand detection and a Luhn check, a review with edit links, then a placing-order state and a success screen, next to an order summary with tax.
- npx shadcn@latest add https://reactframe.com/r/multi-step-checkout-block.json
- Accordion CheckoutFree
- A one-page checkout made of four accordion sections (contact, shipping address, delivery, payment) that open in turn, check their fields and fold into a one-line summary with edit, a segmented progress bar, a pay button that unlocks when everything is filled, and a sticky order summary with discount codes and tax.
- npx shadcn@latest add https://reactframe.com/r/accordion-checkout.json
- Order Confirmation BlockFree
- A thank-you section after checkout: springy check with confetti, a copyable order number, a tracking timeline with the current step pulsing, a live change-or-cancel window with an inline confirm, downloadable receipt and calendar file, items with buy again, address and payment, create-an-account and a copyable referral code.
- npx shadcn@latest add https://reactframe.com/r/order-confirmation-block.json
- Horizontal Filter BarFree
- A sticky filter bar above a product grid: dropdown pills for category (with live counts), price range with presets, colour swatches and rating, one-tap On sale and In stock toggles, a sort menu, removable active-filter chips with clear all, and a grid that reflows with animation; scrolls sideways on phones.
- npx shadcn@latest add https://reactframe.com/r/horizontal-filter-bar.json
- Mobile Filter ModalFree
- A phone-first filter sheet: a floating Filter & sort button with an active-count badge opens a bottom sheet you can drag down to close, with sort radios and collapsible category, price, colour, rating and in-stock sections that summarise their choice, plus a sticky footer with Clear and a live Show N results button.
- npx shadcn@latest add https://reactframe.com/r/mobile-filter-modal.json
- Gift Card DesignerFree
- A gift card builder with a live 3D preview that tilts with the pointer and flips to show the message side: six card designs, preset or custom amounts with limits, to, from and recipient email, a 140-character message in three letterings, send now or on a date, and an add-to-cart button that confirms.
- npx shadcn@latest add https://reactframe.com/r/gift-card-designer.json
- Rating Summary BreakdownFree
- A ratings summary that explains the score: big average with stars, an all-time / last 90 days switch, clickable 5-to-1 star bars, a would-recommend ring with verified share, a 12-month trend line, attribute scores, a two-ended scale, topic chips with positive and negative counts and matching review snippets.
- npx shadcn@latest add https://reactframe.com/r/rating-summary-breakdown.json
- Photo Review GalleryFree
- A customer photo wall for a product: a mosaic with a featured photo and quote, All / 5 stars / Verified filters, a +N tile, a lightbox with the photo, rating, review, verified badge, helpful vote, thumbnails, arrow keys and swipe, plus an Add your photos button that previews picked images.
- npx shadcn@latest add https://reactframe.com/r/photo-review-gallery.json
- Write a Review FormFree
- A product review form with a hover-preview star rating, a fit scale, headline and review fields with a live character goal, quick tags, drag-and-drop photo previews, a recommend toggle, name and email with an initial-only option, a live preview card, inline validation and an animated thank-you screen.
- npx shadcn@latest add https://reactframe.com/r/write-a-review-form.json
- Sticky Add to Cart BarFree
- A product page whose buy box hands off to a floating add-to-cart bar once the main button scrolls away: product thumb, live variant summary, an upward size menu, quantity, price and an Add to cart button that turns into Added while the cart count bumps.
- npx shadcn@latest add https://reactframe.com/r/sticky-add-to-cart-bar.json
- Size Guide ModalFree
- A shoe product card with a size grid and a Size guide link that opens a modal with three tabs: a selectable US/UK/EU size chart in cm or inches, a Find my size tool that recommends a size from foot length and width, and an illustrated How to measure guide. Picking a size applies it to the product.
- npx shadcn@latest add https://reactframe.com/r/size-guide-modal.json
- Frequently Bought TogetherFree
- A bundle builder for product pages: the current product plus add-ons joined by plus signs, each toggled with a check, greyed out when skipped, with bundle discount tiers, a counting total, savings and an Add all to cart button that confirms the items added.
- npx shadcn@latest add https://reactframe.com/r/frequently-bought-together.json
- Recently Viewed ProductsFree
- A browsing history strip grouped into Today, Yesterday and This week: snap-scrolling product cards with viewed times, price drop, back in stock and low stock badges, a quick add button that expands to Added, per-item removal and Clear history with an undo toast, and an empty state.
- npx shadcn@latest add https://reactframe.com/r/recently-viewed-products.json
- Wishlist DrawerFree
- A product grid with heart buttons that burst when saved, a Wishlist pill with a springy count, and a slide-in drawer listing saved items with variant, sale savings and stock, Move to cart, Notify me for sold-out items, a Share link button, a price drop alert switch and Move all to cart.
- npx shadcn@latest add https://reactframe.com/r/wishlist-drawer.json
- Back-in-Stock NotifyFree
- A product buy box where picking a sold-out size swaps Add to cart for a restock alert: expected date and people waiting, an Email or Text message switch, validation, a half-size-either-side option and a ringing-bell confirmation, with alert badges on sizes and removable alert chips.
- npx shadcn@latest add https://reactframe.com/r/back-in-stock-notify.json
- Low Stock Urgency BadgeFree
- Honest stock urgency for product pages and cards: badges that switch between In stock, Selling fast, Only n left (pulsing amber), Last one! (red with a shake) and Back on a date, plus a segmented stock meter that highlights the units you're about to take and drops when you add to cart.
- npx shadcn@latest add https://reactframe.com/r/low-stock-urgency-badge.json
- Shipping EstimatorFree
- A shipping and delivery estimator: a free-shipping progress bar, country and postal code fields with per-country validation, delivery options (Standard, Express, Next day, store pickup) with prices and business-day ranges, remote-area surcharges and an animated timeline of real delivery dates for the chosen option.
- npx shadcn@latest add https://reactframe.com/r/shipping-estimator.json
- Product Comparison TableFree
- A side-by-side product comparison with a sticky header of photos, prices, ratings and Add to cart buttons, collapsible spec groups, yes/partly/no marks, bars and Best badges for measured specs, a Show differences only switch, column hover, removable and re-addable products, and a sticky first column when it scrolls sideways on phones.
- npx shadcn@latest add https://reactframe.com/r/product-comparison-table.json
Questions
- Do these components process payments?
- No. They are the storefront interface. Connect the add-to-cart, checkout and pay actions to your own backend or a provider such as Stripe, Shopify or Lemon Squeezy; payment-button shows the processing, paid and declined states you report back.
- Can I use them with Shopify or another headless commerce API?
- Yes. They take products, prices and images as props, so map the data from your commerce API onto them.
- Are these components free?
- 59 of the 61 are free (Product List, Product Grid Section, Product Detail, Your Cart Page, Variant Swatches, Credit Card Input, Payment Button, Image Showcase, Product Highlight Block, Category Grid Block, Promo Banner Block, Trust Badges Block, Related Products Block, Product Quick View Block, Checkout Form Block, Order Summary Block, Gift Card Block, Product Carousel Block, Mini Cart Drawer, Product Filters Sidebar, Coupon Code Block, Order Bump Block, Free Shipping Progress Bar, Upsell / Cross-sell Block, Incentives Block, Order History Block, Product Features Block, Product Reviews Block, Store Navigation, Welcome Offer Modal, Cart Offer Modal, Newsletter Discount Modal, Category Carousel, Featured Categories Banner, Icon Category Nav, Tabbed Product List, Masonry Product Grid, Product List View (Rows), Mini Cart Dropdown, Cart Modal, Express Checkout Buttons, Multi-step Checkout Block, Accordion Checkout, Order Confirmation Block, Horizontal Filter Bar, Mobile Filter Modal, Gift Card Designer, Rating Summary Breakdown, Photo Review Gallery, Write a Review Form, Sticky Add to Cart Bar, Size Guide Modal, Frequently Bought Together, Recently Viewed Products, Wishlist Drawer, Back-in-Stock Notify, Low Stock Urgency Badge, Shipping Estimator, Product Comparison Table); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.