Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Pre-Order Storefront Block for Vue

A pre-order for a studio wheel with a deposit and balance: a 20 percent deposit or pay in full for 3 percent less, a schedule that follows the choice, a reserved count and a cancel-until date.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Take reservations for something that is not made yet, with this pre-order panel for Vue with Ark UI. A header introduces Kingcup, a pottery wheel and kiln maker. In a hairline frame with a plus mark on each corner, the first band shows a drawn wheel, its price, its ship date and a bar of how many of the 500 in the run are reserved. The second band is a choice of two ways to pay, as radio cards: a 20 percent deposit today, or the full price with a 3 percent saving. The third shows the schedule that follows the choice (paid today, the balance and the date it falls due, 14 days before shipping, and the total) beside three plain benefits, one of them the date you can cancel until. Reserve says "Reserved in this demo, nothing is charged", the reserved count goes up by one and Cancel puts it back. It's built from Button, Shine Button and Guides, with native radios and a CSS bar, and a CSS entrance only. For made-to-order goods, a launch or a crowdfunded run.

FAQ

How do I set the price and the dates?

Edit PRICE (in cents), DEPOSIT_PERCENT, FULL_SAVING_PERCENT, RUN, RESERVED, SHIP, BALANCE_LEAD_DAYS and CANCEL_UNTIL. The deposit, the saving and the balance are whole cents worked out from those, and the balance date is the ship date minus the lead days.

What changes when I choose Pay in full?

Paid today becomes the price less the saving, the balance becomes "No balance" with "Paid in full" where the date was, and the total shows the lower figure. The rows keep their places, so the panel does not change height.

What does Reserve do?

In the page: the button reads Reserved, the choice locks, the reserved count shows one more and the status line says nothing is charged. Cancel unlocks it. To make it real, create the order on your server from the chosen plan and take the deposit with your payment provider's hosted fields, never in this page.

Is the reserved count live?

No, it is a typed number, labelled in the status and the docblock as a sample. Read it from your order system, and show it only if it is true.

How does it look on a phone?

The two cards stack, the schedule and the benefits stack and the Reserve button stays pinned to the bottom of the screen.

Is it accessible?

The plans are a named fieldset of radios, the schedule is a description list, amounts are read as whole phrases and the status line is a polite live region present from the start.

All 100 storefront blocks