shadcn.io is not affiliated with official shadcn/ui
Ecommerce Checkout Skeleton Block for Vue
A two-column checkout that loads in place: field labels stay while bars become your saved name, address and card line, with the order summary and totals beside them.
Installation
Overview
Show a checkout while the customer's saved details load, with this ecommerce checkout skeleton for Vue with Ark UI. A hairline frame with a plus mark on each corner holds two columns for Retort, a grocery-pickup service: Contact, Delivery address and Payment at the start, and the order summary in a side cell. The section headings, every field label, the summary's Subtotal, Pickup fee and Total labels and the Place order button are real from the first paint; each saved value, the card line ("Visa ending 4242" with a Vi tile) and the three drawn groceries and amounts are Skeleton bars that become the data in the same cell, field by field, when you press Load. Once loaded, the fields are real Inputs you can edit. Place order is the one Shine Button and pays nothing: it says so. On a phone the summary stacks under the details. It's built from Skeleton, Field, Input, Shine Button and Guides, with a CSS entrance only. For checkouts, address books and any form that loads saved values.
FAQ
What stays local, and how do I wire it to a real account?
Nothing is fetched. The saved details and the three order lines are typed in SAVED, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real data when it arrives. The bars are derived from the same data as the content, so keep one component for both. Place order only says that nothing was paid or sent: connect it to your own payment flow.
Is there a card field?
No. The payment row shows a saved card as text ("Visa ending 4242") and a two-letter tile, and nothing on the page asks for a card number. In a real checkout, take card details in your payment provider's own hosted fields and show only the brand and last four digits here.
How are the totals worked out?
Every amount is an integer number of cents in the typed data and is worked out from the lines in code (the subtotal sums price times quantity, and the total adds the pickup fee), so the amounts always add up and no rounding drifts. They are written only by one usd helper that turns cents into dollars for display, as $48.00. A price is one left-to-right span so it keeps its shape in right-to-left languages.
Does the panel keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. A field's bar is the height of its input, so the labels, the inputs and the rows below them stay put. The frame, the labels and the buttons are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading your details and order…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. Each input has a visible label tied to it, and the sections are named by their headings. Place order is marked disabled while the page loads.
Why does the form come before the summary in the page?
Reading order follows the visual order on a phone, where the summary sits under the details: a keyboard or screen reader meets the fields first and the order summary and Place order after them. On a wide screen the summary sits at the end side, in the same order.