shadcn.io is not affiliated with official shadcn/ui
Cart Review Checkout Block for Vue
A knitwear shop's bag as an editable list: a drawn thumbnail, size and colour, a quantity stepper from 1 to 9 and a named Remove on every line, a subtotal worked out in cents, and an empty state that keeps the panel's height.
Installation
Overview
Let people check their bag before they go on, with this cart review for Vue with Ark UI. A compact header holds the title and one sentence from Wolderly, a small knitwear shop. Inside a hairline frame with a plus mark on each corner, a list shows a line per item: a drawn thumbnail, the name, the size and colour, the price of one, a quantity stepper from 1 to 9 built from two outline Buttons and a number, the line total, and a ghost Remove that names its item. Under the list the subtotal is worked out in whole cents from the lines and counts up or down as they change (Counting Number), beside the one sentence that matters at this step: shipping and tax are added next. The foot has a polite status line that says what the last change did ("Lambswool scarf: 3. Subtotal $166.00") and Continue to shipping, the only Shine Button. Removing the last line leaves an Empty state in the list's own height, with a way back to the shop and a way to put the sample bag back. On a phone the stepper drops under the name and the foot stays pinned to the bottom of the screen. It's built from Button, Counting Number, Empty, Shine Button and Guides, with a CSS entrance only. For carts, baskets and the first step of any checkout.
FAQ
How do I fill it with my own cart?
Edit LINES at the top of the file. Each line has an id, a name, a variant (size and colour as one phrase), a unit price in whole cents, a starting qty and a glyph that picks the drawing for its thumbnail. The count, the line totals and the subtotal are all worked out from those lines by small helpers, so no figure is typed twice. To show your own pictures, replace Thumb with an image of your product and keep its aria-hidden and the name in text beside it.
How does the quantity stepper behave at its limits?
The two buttons are named for the item ("Fewer Lambswool scarf", "More Lambswool scarf") and sit in a group named "Quantity of" the item. At 1 the minus button stays in place and focusable but reads as unavailable, and pressing it says in the status line that the item is at 1 and that Remove takes it out; at 9 the plus button does the same. Nothing is silently clamped. Change MIN and MAX to move the limits, or read them from your stock.
Why are prices in cents, and how is the subtotal worked out?
Floating-point dollars drift (0.1 + 0.2), so every price is an integer number of cents and usd is the only place that turns cents into text. The subtotal is the sum of each line's unit price times its quantity, the count is the sum of the quantities, and the figure counts to its new value when either changes. Shipping and tax are deliberately not shown: they depend on an address, so the sentence under the list says they come next.
What happens when the last line is removed?
The list is replaced, in the same height, by an empty state: an icon, "Your bag is empty", one sentence, a ghost Continue shopping link and an outline Put the sample bag back button. An unseen copy of the first bag sits in the same grid cell and holds the height, so the foot and the page below don't move. Focus lands on the button that restores the bag, and the status line says the bag is empty; Continue to shipping stays in place but says to add an item first. The Continue shopping link is a Button with asChild around an a element.
How does it look on a phone?
Each line becomes two rows: the thumbnail, the name with its size and price, and the line total on the first; the stepper and Remove (an icon with the word hidden visually but still its accessible name) on the second. The foot is pinned to the bottom of the screen while you scroll, with the status line above a full-width Continue to shipping, and settles at the panel's end from the medium breakpoint.
What stays local in the demo, and how do I wire it up?
Everything. The bag lives in the block's state, Remove and the stepper change only that state, and Continue to shipping only says that shipping comes next. In your app keep the lines in your cart store, send each quantity change or removal to your API (and show its error in the same status line if it fails), and make Continue to shipping a link to your next step: wrap an a element in the Shine Button with asChild.