shadcn.io is not affiliated with official shadcn/ui
Waitlist Storefront Block for Vue
A waitlist with a queue position: 40 dots for the places, three restock batches with typed units and dates, and a join form that takes the next place and says which batch it falls in.
Installation
Overview
Show people where they stand in the queue for a sold-out product, with this waitlist for Vue with Ark UI. A header introduces Jackdaw & Jay, a bag maker, and its Linnet satchel. In a hairline frame with a plus mark on each corner, the first band shows a drawn satchel, "Sold out" and how many people are ahead. The queue is a row of 40 dots, each standing for nine places in the 360 bags of three planned batches: filled dots are taken and the ringed dot is the next place. Under it three segments are sized by the units in each batch, and a list gives each batch's units, the places it covers and an estimated date. A join form with a Field and an Input takes the next place, the queue length plus one, works out the batch from the units and says it in a sentence ("Batch 2: you are #131 of 240 units, est. 24 Nov"). Leave puts it back. The one Shine Button is Join the waitlist. It's built from Field, Input, Shine Button, Button, Badge and Guides, with a CSS entrance only. For limited drops, restocks and made-to-order goods.
FAQ
How do I use my own queue and batches?
Edit AHEAD (people already on the list) and BATCHES (each with its units and an ISO eta). The total, the places each batch covers, the dots, the segments and your batch are all worked out from those. The queue stays honest only if you read it from your own list.
How is my place worked out?
Your place is the number of people ahead plus one. The batch is the first one whose running total of units reaches that place. If the place is past the last batch, the sentence says it falls after the last planned batch.
What happens when I join?
The email is checked, a problem shows under the field and moves focus to it, and otherwise the ringed dot fills, the batch row says You, the sentence changes from "would be" to "are", and focus moves to that sentence. Leave puts everything back. No email is sent and nothing is stored: send the address to your list from the submit handler, and email people when their batch ships.
Are the dots a control?
No. They and the segments are a picture of the sentence under them, so they are hidden from a screen reader, which reads the caption, the batch list and the sentence instead.