shadcn.io is not affiliated with official shadcn/ui
Seat Allocator Success Block for React
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 React with Base 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.
Related
- Pro
Seat Management Billing
Plan and usageSeats on a team plan: members with a role each (viewers are free), a stepper for the seats you pay for, and the monthly and prorated cost worked out before you save.
- Pro
Invite Members Dialog
Share and inviteA household calendar's Members page with its invite dialog shown open: one email field that knows the household's domain, so an outside address joins as a guest, the people who already have access, and a Send invite button that adds a pending row.
- Pro
Payment Receipt Success
Payments and refundsA full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.
- Pro
License Activation Success
Plans and limitsA license confirmation inside an account panel: the plan with its key masked and a button that copies it, the date it runs to, seats in use against seats bought, and a table of what the license includes.
- Pro
Invite Accepted Roster Success
People and approvalsA confirmation page for a teammate joining: who invited them and when, how many seats are used, and a roster where the new member's row is marked Joined and holds a role select that changes the role sentence below.
- Pro
Cancellation Runway Success
Plans and limitsA confirmation page for a cancelled subscription: a ring counting the days of paid access still ahead, the day access ends, the reason given quoted back, and a Reactivate button that turns the page in place.