shadcn.io is not affiliated with official shadcn/ui
Team Seats Checkout Block for Ark UI
Seats bought by pasting emails: each becomes a chip (added, duplicate or not an email), a spare-seats stepper sets the count with a floor of three, and the per-seat price follows three brackets in a table with the active one marked.
Installation
Overview
Buy the right number of seats without counting them, with this team seats checkout for React with Ark UI. A compact header from Heathwick, a design review tool, says that the price per seat follows the size of the team. In a hairline frame with a plus mark on each corner, the first cell is a Textarea for who needs a seat: paste emails separated by commas, spaces or new lines. Each one becomes a chip in a scroll region of fixed height: added, a duplicate of one above (ignored) or not an email (ignored), with the state in words and a glyph, never in colour alone. The second cell turns that into a number. Seats are the valid emails plus any spare seats from the stepper, with a floor of three, and the price per seat comes from the bracket the total falls in: 1 to 4 seats $12.00, 5 to 9 $10.00, 10 or more $8.00 a month. The bracket is marked in a native table, so adding a fifth seat visibly lowers the price of all five. An admin email receives the invoices. Start with 6 seats is the only Shine Button. It's built from Textarea, Input, Field, Button, Shine Button and Guides, with a CSS entrance only. For per-seat software, team plans and any purchase where the count comes from a list.
FAQ
How does the paste box decide what is an email?
The text is split on commas, semicolons and any white space, each piece is lower-cased for comparison and tested against a deliberately loose pattern (something, an at sign, something, a dot, something). A piece that fails is "Not an email, ignored"; one already seen earlier in the paste is "Duplicate, ignored" (case does not matter); the rest are added in order. The three counts are written under the box and the chips are a list, so a screen reader hears each email with its state.
How is the price per seat chosen?
By the total seat count, not by position: every seat costs the price of the bracket the whole team falls in. The three brackets are the BRACKETS array at the top of the file (a minimum and maximum seat count and a price in cents), the table draws from the same array, and the total is seats times that price. Changing the array changes the table, the maths and the sentence together.
What does the floor of three seats do?
A team starts at three seats. If the list has fewer than three valid emails and no spares, the count stays at three and a line under the number says how many seats are held for you. Spare seats are for people you will add later; the stepper goes from 0 to 20 and, at either end, stays in place and says why in the status line instead of silently clamping.
What happens if the admin email is missing?
Pressing Start with N seats is never blocked by a disabled button. It marks the admin email with a problem line (an icon and words), says "Not started. Add the admin email first." in the polite status line and moves focus to the field. A good email lets the press through to the demo result.
What if I paste a very long list?
The count is always right, but only the first 40 chips are drawn, in a region of fixed height that scrolls and can be reached with the keyboard, so the panel never grows. Raise SHOWN if you want more, or replace the chips with a virtual list for hundreds.
What stays local, and how do I wire it up?
Everything: nothing is invited, emailed or charged, and the result says so. In your app, post the valid list and the spare count to your invite endpoint, let it be the authority on duplicates against existing members and on pricing, and show its errors in the same status line.