shadcn.io is not affiliated with official shadcn/ui
Waitlist Invite Settings Block for Ark UI
A waitlist panel with open seats, batch size, cadence, auto-invite and priority rules beside a burn-down chart of a queue of 1,240 that says the day everyone is invited.
Installation
Overview
Let the people who run an invite-only product see where their waiting list goes before they change a number, with this waitlist panel for React with Ark UI. Inside a hairline frame with a plus mark on each corner, the controls sit at the start: open seats and the number of people invited in each batch in Number Input fields, how often a batch goes out in a Native Select, a Switch for inviting automatically and two priority rules (a referral moves up five places, waiting over thirty days three). At the end a burn-down chart follows a queue of 1,240 people with 12 more joining every day, for 90 days from a typed starting day, and a headline says what it amounts to: the day everyone is invited, the day the seats run out with people still waiting, or that the queue keeps growing. Changing the batch, the cadence or the seats redraws the line at once. A batch larger than the seats is refused when you save. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the chart sits under the controls and the save bar stays pinned to the bottom of the screen. It's built from Number Input, Native Select, Switch, Button, Shine Button and Guides, with the chart drawn in plain SVG and CSS. For a beta, a launch list or any product that lets people in a few at a time.
FAQ
How do I use my own queue and signup rate?
Edit the constants at the top. QUEUE is the number of people waiting on the starting day, SIGNUPS is how many join each day, AS_OF is the starting day (every date on the chart counts from it, never from the clock), HORIZON is how many days the chart shows and CEILING is the number at its top. SAVED is the plan stored when the page opens and CADENCES lists the choices for how often a batch goes out.
How is the line worked out?
By a plain loop over the days, in whole people. Each day the signups join the queue; on a batch day, up to the batch size leave it, never more than the people waiting or the seats still open. The line stops on the first day the queue empties (the headline names that day) or on the day the open seats are used up with people still waiting. If automatic invites are off, nothing leaves the queue. If fewer people are invited a day than join, the headline says the queue keeps growing.
What is refused when I save?
A batch bigger than the number of open seats. The line under the fields says so while you type, the batch field is marked invalid when you press Save, and focus moves to it. Number fields settle when you leave them: anything that is not a digit is dropped, zero becomes one, and the largest allowed values are 5,000 seats and 500 per batch.
What happens when I press Save, and what stays local?
Nothing leaves the page and nobody is invited. The block keeps the saved plan and the one being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back and redraws the number fields. To make it real, send the edited plan to your server in the save handler and let a scheduled job send the batches. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.
Is the chart accessible?
The drawing is hidden from assistive technology because its facts are in text beside it: the headline gives the date or the number still waiting, a line under the chart gives the starting queue and the signup rate, and the caption names what the line shows. The chart reads left to right in every language.