Shadcn Shopping Cart Blocks: Page, Dropdown, Sheet

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

A cart page where shoppers change quantities, remove lines and see the totals before paying
A mini cart that drops from a header Cart button or slides in from the side after an add

When not to use

Rows of funds, coins, transactions or integrations, with no quantities or order total: use the List blocks
A side panel over an app page for a record, a form or an assistant, with no prices: use the Sheet blocks
Taking contact, shipping address and card details to place and pay for the order: use the Checkout blocks

Agent notes

Lines live in local useState seeded from CART_ITEMS or CART_LINES in data.tsx; read them from your cart store and write each quantity change back
The empty state's Restore Sample Cart button reloads the demo lines through handleRestoreCart or handleRestore; point it at your catalog
Each priced file declares its own formatCurrency fixed to en-US and USD; change every copy to show another currency or locale

Third-party API docs

Base UI v1: API reference, docs, llms.txt, used by 1 of 7 blocks

Markdownhttps://web.dev.reui.io/blocks/ecommerce/shopping-cart.md

MCPsearch({ query: "shopping cart", type: "block", category: "shopping-cart" })

Full index for agents:llms.txtReUI MCP setup

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.

Save-for-Later Cart Shopping Cart Review With Item List, Free-Shipping Progress, Promo Code, and Order Summary Sidebar
Delivery Summary Cart Two-Column Shopping Cart Page with Sticky Order Summary Frame and Coupon Field
Data Table Cart Data Table Shopping Cart with Column Header Rail, Quantity Steppers, and Order Summary
Pickup Option Cart Full-Page Shopping Cart with Per-Item Delivery or Pickup Toggle and Sticky Order Summary
Payment Method Cart Two-column shopping cart with order summary, coupon field, and payment method tiles
Cart Dropdown Quick Cart Dropdown Menu with Per-Row Quantity Steppers and Live Subtotal
Add-to-Cart Drawer 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 (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

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.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.