shadcn.io is not affiliated with official shadcn/ui
Restaurant Order Checkout Block for Svelte
A cafe collection order where each dish opens to a required size and up to two extras, with a portions stepper, prices worked out in cents, tip chips that show their amounts and four pickup times.
Installation
Overview
Let people tune each dish and see the bill move, with this restaurant order checkout for Svelte with Ark UI. A compact header from Kingfisher Cafe sits over a narrow hairline frame with a plus mark on each corner. Three dishes are rows that open in place (Collapsible), the first already open: a required size as radio chips and an optional "Extras, up to 2" as checkboxes, where the third extra is disabled and says why. Each row has a portions stepper from 1 to 5 and its own price, worked out in whole cents from the base, the size, the extras and the portions. Under the dishes a tip is a row of four chips (no tip, 10, 15 and 20 percent) with the amount on each, and the pickup time is one of four radios, from "As soon as possible, ready in 15 to 20 min" to 13:30. The bill adds the tip. Place order is the one Shine Button: it confirms in this demo, locks the form and gives Undo. It's built from Collapsible, Button, Shine Button and Guides, with a CSS entrance only. For cafes, takeaways, bakeries and any order with options on each line.
FAQ
How do the extras limits work?
Each dish allows two extras. When two are ticked, the others are disabled and their price is replaced by "Up to 2", so the reason is on the row, and the group's legend counts "2 of 2, the most". Untick one and the others come back. The size is required, so one radio is always on.
How is the price of a line worked out?
One portion is the dish's base price plus the size's difference plus the ticked extras, in cents; the line is that times the portions. The dishes are added up, the tip is the chosen percent of that rounded once, and the total is the two. Everything is integer cents, formatted in one place.
Why does each tip chip show an amount?
So the choice is a number, not a percentage to work out. The amounts follow the dishes: change a portion and the chips update. "No tip" is a real choice and shows $0.00.
How does the keyboard work?
Each dish's name is a button that opens or closes its options, and closed options cannot be reached by keyboard. Sizes, tips and pickup times are native radios, so the arrow keys move within a group; extras are native checkboxes.
What changes on a phone?
The row keeps its name, stepper and price on one line, the options stack, and the tip and pickup chips sit two to a row. The foot is pinned to the bottom of the screen.
What stays local, and how do I connect it for real?
Everything: the menu, the prices and the pickup times are typed at the top of the file and the order is a piece of state. Nothing reaches a kitchen or a card. To connect it, load the menu and the ready times from your ordering system, send the order from Place order, and take the payment with your payment provider's hosted fields.