shadcn.io is not affiliated with official shadcn/ui
Sidebar Cart Checkout Block for Vue
A delivery form with its order summary as an 18rem side cell that folds to one line: three lines with steppers and Remove, delivery free from $150, a total that counts, and a form that checks email and name.
Installation
Overview
Let people keep an eye on the order while they fill in where it goes, with this checkout step for Vue with Ark UI. A compact header holds the title and one sentence from Hawthorne Mews, a home textiles shop. Inside a hairline frame with a plus mark on each corner, the main cell is a short real form: an email for the receipt, the name on the parcel and an optional note for the courier, each with a Field label and a problem line under it that is always there. The 18rem side cell is one Collapsible: its trigger always reads Order summary, the item count and the total, which counts up or down as it changes (Counting Number), and opened it lists three drawn lines with a quantity stepper and a Remove that names the item, the delivery line (free from $150.00, $6.50 under it) and the total, all worked out in whole cents. Folding it leaves the one-line trigger. On a phone the summary comes last and starts folded. Removing every line leaves an empty summary in the same height. Continue to shipping is the only Shine Button, on a foot that stays at the bottom of the screen. For shops, ticket sellers and any step where the form is the work and the order is the reference.
FAQ
How does the summary fold, and what happens on a phone?
The summary is a controlled Collapsible: its trigger is the whole top line of the side cell, with a chevron, and a folded summary is made inert so its steppers are out of the keyboard's reach. The side cell is after the form in the DOM, so on a phone it sits under the form and the form leads. After the page mounts it folds itself when the screen is narrower than 768 px, which is why the trigger shows the count and the total: they are all a phone needs until the visitor opens it.
How are the total and the delivery fee worked out?
Every price is an integer number of cents, a line is its unit price times its quantity, and the delivery fee is FEE (650 cents) under FREE_FROM (15000 cents) and nothing at or above it, so the total is the subtotal plus the fee, written by usd, the only place cents become text. Take a line out so the subtotal drops under $150.00 and the delivery line changes to $6.50 at once, in the trigger's total too. An empty order has no fee.
How does the form check what is typed?
On blur and on Continue: an email must look like an email and the name can't be empty, and each problem appears in the line under its field (always rendered, so nothing jumps). A press with a problem names it in the status line and moves focus to the first field that is wrong; the button is never disabled for a typo. The note is optional and unchecked. Fields use the real autocomplete tokens email and name.
What happens when the last line is removed?
The list is replaced, in the same height, by a short empty state with a button that puts the sample order back. An unseen copy of the first order sits in the same grid cell and holds the height, so the totals and the foot don't move. Focus lands on that button, and Continue to shipping stays in place but says to add an item first.
Is it accessible from the keyboard?
Yes. The trigger is a button with an expanded state, the steppers are groups named for their item with buttons named "Fewer" and "More", Remove names its item, and one polite status message in the foot reports each change. The Collapsible is controlled with open and onOpenChange.
What stays local in the demo, and how do I wire it up?
Everything. The order lives in the block's state, the form keeps what is typed in the tab, and Continue to shipping only says that shipping comes next. In your app keep the lines in your cart store, send quantity changes to your API, save the form fields with the order and make Continue to shipping a link to the next step.