shadcn.io is not affiliated with official shadcn/ui
Light Email Capture Progress CTA Block for React
A light waitlist CTA as a split between solid rails: the headline, a sentence and the email form with the Shine Button at the start, and a capacity panel at the end whose bar gets a You pin and a count that rolls up by one when you join.
Installation
Overview
A waitlist call to action that shows how full the list is, for React with Base UI. The page's rails and top rule come from the Guides spine, and a solid divider that meets the top rule splits the block in two. At the start, a headline, a sentence with a bold lead, and an email field with a mail icon beside a Shine "Join the waitlist" button. At the end, a capacity panel: the claimed count at display size ("2,847"), its percentage, "of 5,000 spots claimed", a thick bar in the foreground tone and the spots remaining. Submitting shows the button's spinner, then three things happen together: a "You" pin drops onto the end of the fill, the claimed count rolls up to 2,848 and the form becomes a confirmation that says "You are #2,848". On a phone the form comes first and the panel stacks below it. It's built from Progress, Sliding Number, Input Group, Field, Shine Button and Guides, with Lucide icons, Tailwind CSS and CSS transitions that stay still under reduced motion. Made for pre-launch pages and capacity-limited betas where showing the line is the reason to join it.
FAQ
Where do the numbers come from?
Two constants at the top of the file, TOTAL (5,000) and CLAIMED (2,847). The claimed count, the percentage, the spots remaining, the fill's width, the pin's position and your place in the queue are all computed from them, with a fixed Intl.NumberFormat("en-US") so the server and the browser print the same digits. Replace CLAIMED with the count from your database where the page is built.
How does the You pin work?
The pin is drawn only after the join succeeds, so its entrance, a short fade and drop, plays when it appears. It sits in a zero-width box placed at the same percentage as the fill, using inset-inline-start, so it follows the fill's end in right-to-left layouts too. It is decorative: the confirmation heading carries the same news in text. Both the pin and the fill are in the foreground tone, so the Shine Button is the only primary control.
Is the bar accessible?
The count and the figures beside the bar are text, so the bar itself is hidden from assistive technology as a decoration, with a name for the libraries that ask for one. After a join, focus moves to the confirmation, whose heading reads "You are #2,848", so the result is read aloud and the keyboard carries on from there.
How do I connect it to my waitlist?
The request is simulated in submit: when the address passes the check, phase goes to "sending" and a timer (LATENCY) sets it to "done". Replace the timer with a request that returns the person's real position, store it in state and use it in place of claimed, and on failure go back to "idle" with a message in error. The timer is cleared when the block unmounts, so cancel a real request there too.
What happens with reduced motion?
The digits change in place instead of rolling, the pin appears without its drop, and the form and confirmation swap without a fade. Nothing on the page moves by itself.
Does it fit a phone?
Yes. The two halves stack with a rule between them, the field and button go full width, and the pin has its own headroom above the bar, so nothing shifts when it appears. Between lg and xl the half is narrow, so the field and button stack there too. A long address in the confirmation breaks anywhere instead of widening the column.
Related
- Pro
Progress Urgency CTA
Urgency and limitsA centred scarcity statement: a headline over a framed seat map of 200 dots, one per founding seat, with the claimed ones solid and the next open ones pulsing, then the price with its list price struck and a Shine Button.
- Pro
Light Email Capture CTA
Forms and captureA newsletter CTA as a band between solid rails: a headline and a sentence at the start, and at the end one Shine Button that opens in place into an email field with its own Shine submit, closes on Escape and ends in a confirmation.
- Pro
Centered Light Avatar Email Capture CTA
Forms and captureA newsletter call to action in a framed form panel where the topics are toggle chips, each with its author's avatar: pick at least one, add an email, and the confirmation lists what you chose.
- Pro
Waitlist Signup Hero
Signup and waitlistA compact waitlist hero: the copy beside a card-in-card email form that turns into a confirmation in place, with a closing band of three features coming at launch.
- Pro
Centered Progress Bar Hero
Updates and timelinesA compact centered launch hero with a full-width progress bar that fills on load, four milestone cells divided at the quarter marks, the Shine Button and a second action.
- Pro
Ribbon Urgency CTA
Urgency and limitsA reverse split sale call to action: the discount at display size under a corner sash reading Limited time, a hairline divider, then an Ends in 3 days badge, the headline and a Shine Button. Urgency comes from type and structure, not a red fill.