What is the difference between the page, dropdown and sheet carts?

Scale and moment. The page cart is a full basket review with a summary sidebar and promo entry. The dropdown is a compact header preview with a live subtotal and links to the cart and checkout. The sheet is the confirmation drawer that opens on add-to-cart, highlighting the new line. Most stores ship at least two of the three.

Do the quantity steppers and totals actually recalculate?

Yes. The steppers are wired to local state over placeholder line items, so changing a quantity updates the line total, the subtotal, the free-shipping progress bar and the summary. Swap the placeholder array for your cart store or server data and keep the same handlers, and the arithmetic keeps working.

Can I drop the mini cart into my existing header?

That is what it is for. The dropdown block is a cart trigger button with a count badge plus its menu content, so it fits into a navbar you already have. The slide-out version is a sheet whose open state you control, which means your add-to-cart handler decides when it appears.

How do I install a shopping cart block?

Run the shadcn CLI against the ReUI registry, for example npx shadcn@latest add @reui/shopping-cart-7. The block and every component it uses are copied into your project, so you can edit the item row, the summary lines or the empty state directly. It works with Next.js, Vite, Remix, Astro or TanStack Start.

Shadcn Shopping Cart Blocks: Page, Dropdown, Sheet

Shadcn Shopping Cart Blocks for Pages, Dropdowns, and Drawers

Most cart UI you find gives you one cart page. A real store needs three: the page a buyer lands on from the header, the small preview that drops down when they click the cart icon, and the drawer that slides in to confirm what they just added. These blocks cover all three.

The full-page carts differ in layout, not only in skin. There is a classic two-column with a sticky order summary, a Frame summary rail, a data-table cart with a column header row and per-line totals, and one where each item chooses delivery or pickup with its own date and fee.

The mechanics stay consistent across the set: ButtonGroup quantity steppers, coupon entry in an InputGroup, free-shipping Progress bars, subtotal, tax and discount lines, and Empty states for a basket with nothing in it.

All Shopping Cart Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Shopping Cart 1 Shopping Cart Review With Item List, Free-Shipping Progress, Promo Code, and Order Summary Sidebar
Shopping Cart 2 Two-Column Shopping Cart Page with Sticky Order Summary Frame and Coupon Field
Shopping Cart 3 Data Table Shopping Cart with Column Header Rail, Quantity Steppers, and Order Summary
Shopping Cart 4 Full-Page Shopping Cart with Per-Item Delivery or Pickup Toggle and Sticky Order Summary
Shopping Cart 5 Two-column shopping cart with order summary, coupon field, and payment method tiles
Shopping Cart 6 Quick Cart Dropdown Menu with Per-Row Quantity Steppers and Live Subtotal
Shopping Cart 7 Mini Cart Slide-Out Sheet Drawer with Just Added Confirmation and Free Shipping Progress

Three Scales of Cart

Pick the surface by where the cart is being opened from, then keep the same item row design across all three.

Full basket review page Page-level carts with item rows, thumbnails, size and color metadata, save and remove actions, promo entry, and an order summary carrying subtotal, tax, discount and the checkout button.
Header mini-cart dropdown A DropdownMenu preview opened from a cart button with a count Badge: scrollable rows, per-row quantity steppers driving a live subtotal, View Cart and Checkout actions, and an empty state.
Slide-out mini cart A Sheet drawer for the moment right after add-to-cart, highlighting the just-added line with a success badge, then free-shipping progress, subtotal and Checkout.

Cart Page Layouts Worth Comparing

The page-level carts are five different answers to the same screen, not five skins of one grid.

Two-column with a sticky order summary sidebar that stays put while a long item list scrolls.
A Frame summary rail holding coupon, delivery, tax and total when you want one bordered surface instead of stacked cards.
A data-table cart with a column header rail, linked product titles, color swatch and size per row, per-line totals, and a free-shipping badge in the summary.
A per-item fulfillment cart where every line toggles delivery or pickup with its own date and fee, topped by a hero estimated total.
A cart that pairs the order summary with a four-tile payment method RadioGroup, so the buyer chooses how they pay before ever leaving the cart.

Quantity, Coupons, and Totals

Quantity is a ButtonGroup stepper throughout, so decrement, count and increment read as one control rather than three loose buttons. Changing a quantity updates the line total and the summary in the same render.

Coupon entry uses an InputGroup with the apply button inline, and the free-shipping Progress bar shows how far a basket sits from the threshold, which is the nudge most hand-built carts leave out.

Order summaries carry subtotal, discount, delivery and tax, with Tooltip explanations on the lines that usually generate support tickets, plus Empty states so a zero-item cart is a designed screen rather than a blank column.

Related Shadcn eCommerce Block Categories

The cart is the middle of the funnel. These are the categories on either side of it.

Checkout Where the Checkout button goes: multi-step stepper flows and express single-page payment screens.
Receipt Order confirmation and receipt layouts that reuse the same item rows and totals block.
Coupon Promo and discount UI to pair with the coupon field in the cart summary.
Wishlist Saved-for-later pages for the items a shopper removes from the cart but is not done with.
Product Card Catalog grids and quick-buy cards whose add-to-bag buttons open the slide-out cart.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (291) Browse 291 Shadcn Application blocks across 21 categories.
Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
Shadcn Marketing Blocks (24) Browse 24 Shadcn Marketing blocks across 4 categories.

Frequently Asked Questions

Shadcn Shopping Cart Blocks for Pages, Dropdowns, and Drawers