MiniDev UI

React e-commerce components

Free React e-commerce components: product cards, cart line items, quantity steppers, coupon inputs, shipping address, order summary and checkout blocks.

9 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark

Commerce UI lives or dies on clarity: what you are buying, what it costs, and what happens next. These components keep totals visible, errors inline and the next step obvious.

They pair with any cart or payment backend, from Shopify storefront APIs to Stripe Checkout, because they only render the state you pass in.

Components 8

Cart Line ItemuiReact shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals.npx shadcn@latest add ui.minidev.pro/r/cart-line-item.jsonCheckout SummaryuiTailwind order summary card listing line items and prices, a divided total row and a full width Pay now button. Fits the side column of a checkout.npx shadcn@latest add ui.minidev.pro/r/checkout-summary.jsonCoupon InputuiPromo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.npx shadcn@latest add ui.minidev.pro/r/coupon-input.jsonOrder SummaryuiA checkout summary card listing line items such as subtotal, shipping and tax, then a separator and a bold total. Built with React for cart pages.npx shadcn@latest add ui.minidev.pro/r/order-summary.jsonProduct CarduiA storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set.npx shadcn@latest add ui.minidev.pro/r/product-card.jsonQuantity StepperuiReact quantity stepper with minus and plus buttons around a tabular count. Clamps to min and max, disables at the limits, and works controlled or uncontrolled.npx shadcn@latest add ui.minidev.pro/r/quantity-stepper.jsonShipping AddressuiShipping address form with full name, street address, city and postal code fields, each with the right autocomplete attribute for browser autofill at checkout.npx shadcn@latest add ui.minidev.pro/r/shipping-address.jsonWishlist ButtonuiA Tailwind heart icon button for product cards that toggles a wishlist state. It sets aria-pressed and switches its label between add and remove.npx shadcn@latest add ui.minidev.pro/r/wishlist-button.json

Blocks and full pages 1

Commerce CheckoutblockA two column React checkout page with an editable cart line item, a shipping address form, and an order summary with subtotal, tax, total and a pay button.npx shadcn@latest add ui.minidev.pro/r/commerce-checkout.json

See them live

Galleries render these components with sample data in every state.

Frequently asked questions

Is there a full checkout page?

Yes. The commerce checkout block combines address, shipping, payment and order summary into one page.

Do these work with Shopify or Stripe?

Yes. They are UI components, so you load cart and product data from your backend and render it with them.

Is there an example store?

The Hale template shows a product page with color and size pickers and a swipe to close cart.

Related categories

React pricing and billing components React form components Landing page sections for React and Tailwind