# Waitlist 1 > A single-screen waitlist page that returns a position in line A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/waitlist-1). - Page, with a live preview: https://shadcn.exchange/r/shadcnstore/waitlist-1 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnstore/waitlist-1-light-debadbb66b226f58.png - Registry item: https://shadcnstore.com/r/waitlist-1.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/shadcnstore/waitlist-1.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `@shadcnstore/motion-avatar-group`, `avatar`, `badge`, `field`, `input-group`, `spinner` ## Files ### `storage/app/registry-sources/marketing/waitlist/waitlist-1/page.tsx` ```tsx import { Waitlist1 } from "@/components/blocks/marketing/waitlist/waitlist-1/components/waitlist-1" export default function Page() { return (
) } ``` ### `storage/app/registry-sources/marketing/waitlist/waitlist-1/waitlist-1.tsx` ```tsx 'use client' import { useId, useState, type FormEvent } from 'react' import { motion, useReducedMotion } from 'motion/react' import { Check } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group' import { Spinner } from '@/components/ui/spinner' import { Waitlist1QueueField } from './waitlist-1-queue-field' import { Waitlist1WaitSteps } from './waitlist-1-wait-steps' import { Field, FieldError, FieldLabel } from '@/components/ui/field' import { AvatarGroup } from '@/components/motion/avatar-group' import { socialLinks, waitlistAvatars, waitlistCopy } from "@/components/data/waitlist-1-data" /** * Integration seam — resolve with the position the server assigned. The demo number is * generated client-side after submit, so it never differs between server and client render. */ async function join(email: string): Promise { await new Promise(resolve => setTimeout(resolve, 800)) void email return 400 + Math.floor(Math.random() * 60) } const isValidEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value.trim()) type Status = 'idle' | 'submitting' | 'success' /** * The ShadcnStore mark, per BLOCK-QUALITY-BAR.md §5. * * Every block that renders a first-party brand mark renders ours. The demo *content* stays the * industry business this batch is written around; the brand *chrome* is always ShadcnStore, * because every preview in the gallery is branded as ours and a buyer swaps one component after * pasting. Path data is the canonical mark from `resources/views/components/logo.blade.php`, * `currentColor` throughout so it re-themes, and `aria-hidden` because the wordmark beside it is * the accessible name. */ function Logo() { return ( ShadcnStore ) } export function Waitlist1() { const inputId = useId() const errorId = useId() const [email, setEmail] = useState('') const [status, setStatus] = useState('idle') const [error, setError] = useState(null) const [position, setPosition] = useState(null) const reduceMotion = useReducedMotion() const handleSubmit = async (event: FormEvent) => { event.preventDefault() if (!isValidEmail(email)) { setError(email.trim() ? 'Enter a valid email address.' : 'Enter your email address.') return } setError(null) setStatus('submitting') setPosition(await join(email)) setStatus('success') } // One load-in stagger: on a page-level block, arriving is the entrance. const rise = (index: number) => reduceMotion ? {} : { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5, ease: 'easeOut' as const, delay: index * 0.06 }, } /* A rem floor, not `min-h-svh`. This is a full-page block so it wants to fill the fold, but `svh` resolves against whatever viewport it is in — and inside a container sized to its own content, which the gallery's preview frame is, that is circular: the block asks for the height of a box whose height it is setting. It settled at the frame's starting height and never came down, leaving several hundred pixels of empty page under the form. */ return (
{/* `max-w-3xl`, not `max-w-md`. A 48px headline inside a 448px column broke into four lines of two or three words each, which is the readability problem: at that measure the eye gets no run of text to travel along and every line is a fresh start. The wider column also gives the three steps under the form a row of their own. The headline, the lede and the form each keep a narrower measure inside it — a single input wants to look like one field, not a banner. */}
{/* `leading-[1.08]` and `text-balance`: at display sizes the default line height leaves the lines drifting apart, and balancing stops the last line becoming a single orphaned word. */} {waitlistCopy.headline} {/* `text-foreground/75` rather than `text-muted-foreground`. The muted token is mixed for small print on a solid surface; on this washed gradient it fell close enough to the background that the one sentence explaining the product was the hardest thing on the page to read. Larger, and darker, since it is doing real work. */} {waitlistCopy.subhead} {status === 'success' ? ( /* The position is the receipt. It is set in the display size the headline uses, in tabular figures, because the number is the whole reason someone gave an address — rendering it in body text beside a tick reads as a form that submitted, not as a place in a line. */

# {position}

{waitlistCopy.successBody}

) : (
{/* `Field` rather than a bare label above a control: it is what carries the invalid state to everything inside it, so the field, its label and its message stay in one piece instead of each being told separately. */} Email address {/* One pill carrying the field and its button. Side by side they were two controls for one action, and the pair either wrapped or squeezed the input at small widths; inside a single group there is nothing to wrap. */} setEmail(event.target.value)} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : undefined} disabled={status === 'submitting'} /> {status === 'submitting' ? ( <> Joining… ) : ( waitlistCopy.submitLabel )} {error ? ( {error} ) : null}
)} {/* The social proof line retires once there is a position. "2,431 people ahead of you" under a card that has just said "#402" contradicts it — the number that matters after joining is the reader's own. */}

{waitlistCopy.proof}

 {socialLinks.map(link => (
  • {link.label}
    • ))}
    ) } export default Waitlist1 ``` ### `storage/app/registry-sources/marketing/waitlist/waitlist-1/waitlist-1-queue-field.tsx` ```tsx 'use client' import { motion, useReducedMotion } from 'motion/react' /** * A queue, drifting forward behind the copy. * * The section had no image and no motion, so it was a headline on a white page and read as a * placeholder however good the words were. The subject supplies the motif: a waitlist is a line * of people moving, so the backdrop is rows of short ticks travelling steadily to the right, with * one tick per row lit to stand for a place in it. * * Every value is derived from `--foreground` and `--primary`, so the field re-themes with the * customizer and needs no `dark:` override. */ /** One tick plus its gap. The row animates exactly this far, so the loop is seamless at any width. */ const tickPitch = 26 const rowHeight = 34 /** * Rows drift at slightly different speeds, so the field never resolves into a single moving grid. * * They sit at the top and bottom edges rather than spread evenly down the plane. Spread out, a * row crossing the middle reads as a rule struck through the headline rather than as texture * behind it — the mask alone was not enough, because a straight line running the full width is * legible at almost any opacity. */ const rows = [ { top: '6%', seconds: 15, litAt: 3 }, { top: '17%', seconds: 19, litAt: 7 }, { top: '76%', seconds: 13, litAt: 1 }, { top: '87%', seconds: 21, litAt: 5 }, ] const tickColor = 'color-mix(in oklab, var(--foreground) 7%, transparent)' /* Masked on both axes so the field has no hard edge, and cleared hardest through the middle where the headline sits — the ticks are atmosphere, and atmosphere that competes with the type it sits behind has stopped being atmosphere. */ const fadeVertical = 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)' const fadeHorizontal = 'linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%)' const clearing = 'radial-gradient(ellipse 64% 62% at 50% 50%, transparent 45%, #000 100%)' function Row({ top, seconds, litAt, reduceMotion }: { top: string; seconds: number; litAt: number; reduceMotion: boolean }) { return (
    {Array.from({ length: 160 }, (_, index) => ( ))}
    ) } export function Waitlist1QueueField() { const reduceMotion = useReducedMotion() return ( ) } export default Waitlist1QueueField ``` ### `storage/app/registry-sources/marketing/waitlist/waitlist-1/waitlist-1-wait-steps.tsx` ```tsx 'use client' import { motion } from 'motion/react' import { waitSteps } from "@/components/data/waitlist-1-data" /** * What the wait actually involves, in three steps. * * The block used to end at the email field with half a screen of nothing under it, which is the * shape of every waitlist page that never converted: it asks for an address and says nothing * about what happens next. Naming the cadence — a wave a week, forty places, three days' notice — * is the argument for joining, and it is also what fills the fold. * * Numbered rather than iconed. Three lucide glyphs above three lines is the stock feature grid; * a step number says these things happen in an order, which is the only claim being made. */ export function Waitlist1WaitSteps({ rise }: { rise: (index: number) => Record }) { return (

    What happens after you join

      {waitSteps.map(step => (
    1. {step.step}

      {step.title}

      {step.detail}

      2. ))}
    ) } export default Waitlist1WaitSteps ``` ### `storage/app/registry-sources/marketing/waitlist/waitlist-1/waitlist-1-data.ts` ```ts /** Synthetic Meridian Health (telehealth & multi-site clinic platform) demo data. */ export interface SocialLink { label: string href: string } /** Photographic avatars keep the stack legible on both themes without a fixed backing colour. */ export const waitlistAvatars: string[] = [ 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/sarah-johnson.400w.01a6ba.avif', 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/michael-rodriguez.400w.d8234b.avif', 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/emily-chen.400w.8fb3cf.avif', 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/david-kim.400w.a3611d.avif', ] export const waitlistCopy = { /* Brand chrome, so it is ours: the social accounts a waitlist page links to belong to whoever is running the waitlist, and every preview in the gallery is branded as ShadcnStore. The rest of the copy stays the industry business the batch is written around. */ brand: 'ShadcnStore', badge: 'Opening in March · Alvalade', /* A clinic list, not "the workflow engine your ops team keeps asking for". The old dressing was the SaaS default the quality bar bans by name — schedules, retries, audit trails — and it gave the block nothing specific to say. A clinic that can only register forty patients a week has a real reason to hold a list, and every number on the page can be checked against that fact. */ headline: 'Meridian Alvalade opens its list in March.', subhead: 'One clinician who knows your history, same-week appointments, and no call centre. We register forty new patients a week.', proof: '2,431 people ahead of you', submitLabel: 'Join the list', successTitle: 'You are on the list', successBody: 'We email each wave three days before it opens, with a slot already held for you.', } /** * What happens after the email is given, in three steps. * * A waitlist asks for something and promises nothing in return, which is why so many of them are * a headline and a box. Naming the wait — how long, what arrives, what is decided — is the part * that makes it worth joining, and it fills the half-page the form used to leave empty. */ export type WaitStep = { step: string; title: string; detail: string } export const waitSteps: WaitStep[] = [ { step: '01', title: 'You take a place in line', detail: 'Position by the second the form is submitted. No queue-jumping, no referral tricks.', }, { step: '02', title: 'A wave opens every Monday', detail: 'Forty places. You are emailed three days before yours, so nothing needs watching.', }, { step: '03', title: 'You pick the clinician', detail: 'Six GPs at Alvalade, with their languages and next free slot listed. Change once, free.', }, ] export const socialLinks: SocialLink[] = [ { label: 'Instagram', href: '#instagram' }, { label: 'The clinic', href: '#clinic' }, { label: 'Careers', href: '#careers' }, ] ```