shadcn.io is not affiliated with official shadcn/ui
Cart Storefront Block for Radix UI
A cart rail beside the shelf you add from: six drawn tools whose Add becomes a stepper, a cart with steppers capped at the stock, Remove with Undo and a subtotal in whole cents, all in a stage that scrolls inside itself.
Installation
Overview
Let shoppers build a cart without leaving the shelf, with this cart section for React with Radix UI. A header names the shop, Gannet Row, and says what the block is. A hairline frame with a plus mark on each corner holds a stage of fixed height: at its start a shelf of six drawn tools in hairline cells, each with its price, its stock and an Add Button that turns into a quantity stepper once the tool is in the cart, and at its end the cart in a side cell with a line per tool, a stepper that stops at 1 and at the stock typed for that tool, Remove, and a subtotal worked out in whole cents. Remove keeps the row in place as "Removed. Undo", so nothing jumps and Undo puts it back; a cart with nothing in it shows an Empty state. Checkout is the one Shine Button, and a polite line in the foot says what each change did. It's built from Button, Empty, Shine Button and Guides, with a CSS entrance only. For a shop's collection page, a quick-order screen or any page where the cart sits beside the products.
FAQ
How do I fill it with my own products?
Edit TOOLS. Each has an id, a name, a unit line (size or finish), a price in whole cents, the stock the stepper stops at and a kind that picks its drawing from SHAPES. The cart starts from START, a list of { id, qty, gone } lines. Totals, counts and the status messages all come from those rows, so nothing is typed twice.
What stops a quantity from going too high or too low?
The steppers. Fewer is disabled at 1 (Remove is the way to take a line out) and More is disabled at the tool's stock. Both stay pressable on purpose: pressing one at its limit says why in the status line ("Only 3 Smoothing plane in stock.") instead of doing nothing. The buttons are aria-disabled, not disabled, so they keep focus.
What happens when I press Remove?
The line stays in its place and turns into "Removed Claw hammer." with an Undo button, which takes focus. The subtotal and the count drop at once. Undo restores the line with the quantity it had. Adding the same tool again from the shelf also brings it back, at 1. The row is only really gone when your own code drops it from the list.
What stays local, and how do I wire it to a real cart?
Everything: the cart lives in the component's state, Checkout says "No checkout opens in this demo" and nothing is sent. To wire it up, replace the add, step, remove and undo functions with calls to your cart API and set the lines from its response. Keep the stock check on the server as well, since the stock shown here is typed.
Why do the shelf and the cart scroll inside the stage?
The stage has a fixed height from the medium breakpoint up, so adding lines never pushes the page down or moves the Checkout button. Both columns are labelled scroll regions you can reach with the keyboard. On a phone the cart sits under the shelf in its own region of fixed height.
Is it accessible?
Every stepper is a named group ("Quantity of Claw hammer") with buttons named for the tool, the Remove and Undo buttons say which line they act on, prices are written out and the status line is a polite live region present from the start. Focus moves to Undo after a removal and back to Remove after Undo. The drawings are hidden from assistive technology.