shadcn.io is not affiliated with official shadcn/ui
Seat Allocator Success Block for Vue
A full-height confirmation for seats bought in bulk: four teams with steppers that can never take more than were bought, a bar and an unassigned count that follow them, a Save allocation button with a local result, and the order beside it.
Installation
Overview
Let the buyer hand out what they just bought, with this bulk purchase page for Vue with Ark UI. It fills the screen between the page's two side rails and one band with a plus mark at each end, with its content in a start-aligned column. A check in a muted tile, the heading with the number of seats and one sentence come first. Then a corner-marked panel splits in two. The first cell is the allocator: four teams, each with a Number Input stepper, a Progress bar of the seats given out and a count of how many are still unassigned, and the Shine Button that saves the allocation, the only colored control. The second cell is the order: its number with a Copy Button, the seats and their price, the total and the card. The steppers share the seats that were bought, so a team can never take more than are left. It's built from Number Input, Progress, Copy Button, Shine Button and Guides, with a CSS entrance only. On a phone the allocator comes first and the order follows it. For design, dev and collaboration tools sold by the seat.
FAQ
What stays in the page, and how do I wire it for real?
Everything about the allocation: the order is typed sample data, and Save allocation keeps the numbers in the page's own state, says so in a polite status line ("Saved in this demo") and notifies nobody. The clipboard is real, since the Copy Button writes the order number. To wire it for real, post the counts per team in save to your API, let your server assign the seats and email the people, and show its answer in the status line. Fill SEATS, SEAT_PRICE, ORDER_ID and CARD from your order.
How does the allocator stop the teams taking too many seats?
Each stepper's maximum is the seats it could hold now: the seats still unassigned plus its own, worked out from the other teams' counts, so the plus button stops when none are left and typing a bigger number is cut to what remains. The bar and the "3 unassigned" count are derived from the same numbers, and you can save with seats left over: they wait in the pool, which the status line says.
Why does the button change after saving?
Save is never hidden and never disabled out of reach: after a save it reads "Allocation saved" and goes quiet with aria-disabled, so it keeps keyboard focus and still explains itself, and any change brings the Save allocation label back. It's one button, so focus stays where it was.
How do the number fields behave on each base?
The same: a whole number from zero up to the room left, with the minus and plus buttons next to it. The bar and the count follow every digit you type. Each field is named by its team ("Brand seats"), and digits typed in Arabic-Indic numerals on a right-to-left page are read correctly.
How are the amounts and the date written?
The seat price is whole cents, the total is the seats times the price, and both are written with Intl.NumberFormat in a fixed en-US locale, each in a left-to-right span so digits keep their order on a right-to-left page. The date is a fixed ISO string written in UTC in a time element, never the visitor's clock.