Waitlist

A pre-launch sign-up in three layouts. Card is a compact card with the field over the button, for a corner of a page. Launch puts your mark and a live countdown to the opening date over the form on a wide panel. Queue sets the form as a pill on a soft ground, with the faces of who is already in and a bar of the early spots claimed. Whichever layout, the form becomes the reader's place in line when your promise resolves — a number that counts up, and an invite link to copy to move up. One reveal when the section first appears; after that only the countdown's seconds and the reader's own actions move anything.

Waitlist is built from library pieces: the countdown is the Counter's slide variant, the field is Input, the action is Button, the faces are an Avatar Stack, the spots bar is Progress and the invite link is a Copy Button. Every piece of copy is a named part — Mark, Countdown, Heading, Intro, Form, Proof, Spots — so the words are yours.

Launch

Your mark, a countdown to the opening date, and the form beside its button on a wide panel. Type an address and submit — the form becomes your place in line, counting up, with an invite link to copy.

Countdown: takes a date (a Date or ISO string) and shows days, hours, minutes and seconds to it, each figure sliding as it changes — it is the Counter block's slide countdown in the panel's own text colour. Once the date has passed it shows doneLabel instead.
Return a number fromonJoin: and it becomes the reader's place in line, counting up from zero. Resolve with nothing for the thank-you alone; throw an Error to stay on the form with its message under the field.
shareUrl: on Form adds a copy button for the reader's invite link to the thank-you, with shareHint beside it.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Waitlist

npx shadcn@latest add @algorize-ui/waitlist

components/custom/blocks/WaitlistBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Waitlist to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component. @radix-ui/react-avatar and motion come in with the components above rather than from Waitlist directly.

avatar-stack, button, copy-button, counter, input and progress are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/avatar-stack @algorize-ui/button @algorize-ui/copy-button @algorize-ui/counter @algorize-ui/input @algorize-ui/progress

@radix-ui/react-avatar and motion are npm packages.

npm install @radix-ui/react-avatar motion

Examples

Card

A compact card with the field over the button — for a sidebar, a footer or a modal. Submit an empty field to see the input report it.

Setvariant"card": for the card. The heading and intro size down, the button goes full width, and the thank-you takes the card's own border rather than a shadow.
note: on Form is a small line under the button — what joining means, in your own words.

Queue

The form as a pill on a soft ground, the faces already in line under it, and a bar of the early spots claimed that fills once as the section appears. Switch the docs to dark mode to see the same panel by night.

Setvariant"queue": for the pill and the soft ground. The panel, form and thank-you restyle themselves for light and dark mode.
Spots: takes claimed and total, counts the figure up and fills a Progress bar to match. Pass children to write the line yourself.

Features

Built from the library

Counter for the countdown, Input for the field, Button for the action, Avatar Stack for the faces, Progress for the spots bar and Copy Button for the invite link. Install this one item and all six come with it.

A thank-you that says where you stand

Resolve your promise with a number and the form becomes that place in line, counting up. Add a share link and the reader can copy it to move up. A thrown error puts its message under the field.

One reveal, then only what matters

Mark, countdown, heading, form and proof rise in once. After that the seconds tick, the spots bar fills, and nothing else moves until the reader acts. Reduced motion renders the finished state.

Accessible by default

A real email field with a label, a submit button with a busy state, an alert for a bad address, a status region for the thank-you, a timer role on the countdown and a progress bar with real values.

Props Reference

Waitlist

Prop	Type	Default	Description
`variant`	`"card" \| "launch" \| "queue"`	`"card"`	The layout.
`accent`	`string`	theme primary	Colour of the mark, the button and the spots bar.
`reveal`	`"in-view" \| "immediate"`	`"in-view"`	When the reveal plays.
`children`	`ReactNode`	—	The parts, in reading order.

Waitlist.Form

Prop	Type	Default	Description
`onJoin`	`(email: string) => void \| number \| Promise<void \| number>`	—	Called on submit. A promise holds the busy state; a number becomes the place in line; a thrown `Error` shows its message under the field.
`placeholder`	`string`	`"[email protected]"`	Field placeholder.
`action`	`string`	`"Get on the list"`	Button label.
`successTitle`, `successText`	`string`	`"Your spot is saved"`, `"Expect an email from us as soon as your invite opens up."`	The thank-you.
`positionLabel`	`string`	`"in line"`	The word after the number.
`shareUrl`	`string`	—	The reader's invite link. Given, the thank-you shows a copy button.
`shareLabel`, `shareHint`	`string`	`"Copy referral link"`, `"Each friend who joins bumps you forward."`	The copy button's label and the line beside it.
`note`	`string`	—	A small line under the form.

Waitlist.Countdown, Proof, Spots

Part	Prop	Type	Description
`Countdown`	`date`	`Date \| string`	When the doors open. Days, hours, minutes and seconds to it are shown, ticking — the Counter's `slide` countdown.
`Countdown`	`label`, `doneLabel`	`string`	The line over the figures (`"Launching in"`), and what replaces them once the date has passed (`"Now live"`).
`Proof`	`avatars`	`string[]`	Up to four faces, stacked, with the rest folded into a count; the line is the children.
`Spots`	`claimed`, `total`	`number`	How many early places are gone, of how many. The figure counts up and the bar fills to match; pass children to write the line yourself.

Mark takes children — a letter, an <img> or an SVG — and sits in a square of the accent. Heading and Intro take children and any heading / paragraph props.