v2.3Urgency

Waitlist Position Display

Shows the user their position in line, optionally with a referral mechanic for skipping ahead. Doubles as engagement and proof. Includes clipboard copy with a feedback state.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Compact

You are in line

847

Expanded

Welcome, you@example.com

You are in line

312

of 12,400 people on the waitlist

With referral mechanic

Welcome, you@example.com

You are in line

847

of 12,400 people on the waitlist

https://yourapp.com/ref/abc123

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
position	number	required	The user's current position in the queue
total	number	undefined	Total number of people in the queue; shown as context below the position
userEmail	string	undefined	Displayed as a personalized welcome line above the headline
referralLink	{ url: string; copyButtonLabel?: string }	undefined	When provided, renders the referral URL and a copy-to-clipboard button
onReferralCopy	() => void	undefined	Called once after a successful clipboard write
style	"compact" \| "expanded"	"expanded"	Controls layout density; compact omits the welcome line and reduces padding
headline	string	"You are in line"	Overrides the default headline derived from the position
className	string	undefined	Extra class appended to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/waitlist-position-display/styles.css">

<section class="wpd wpd--expanded" aria-label="You are number 847 in the waitlist">
  <p class="wpd__welcome">Welcome, you@example.com</p>
  <h2 class="wpd__headline">You are in line</h2>
  <p class="wpd__position">
    <span class="wpd__position-prefix" aria-hidden="true">#</span>847
  </p>
  <p class="wpd__total">of 12,400 people on the waitlist</p>
  <div class="wpd__referral">
    <span class="wpd__referral-url">https://yourapp.com/ref/abc123</span>
    <button class="wpd__copy-button" type="button" aria-label="Copy referral link">
      Copy your link
    </button>
    <span class="wpd__copy-status" aria-live="polite"></span>
  </div>
</section>

<script>
(function () {
  var btn = document.querySelector('.wpd__copy-button');
  var status = document.querySelector('.wpd__copy-status');
  var url = 'https://yourapp.com/ref/abc123';

  if (!btn) return;

  btn.addEventListener('click', function () {
    navigator.clipboard.writeText(url).then(function () {
      btn.textContent = 'Copied';
      btn.classList.add('wpd__copy-button--copied');
      status.textContent = 'Referral link copied to clipboard.';

      setTimeout(function () {
        btn.textContent = 'Copy your link';
        btn.classList.remove('wpd__copy-button--copied');
        status.textContent = '';
      }, 2000);
    });
  });
}());
</script>

Customization

Override these CSS custom properties to integrate the component into your brand.

.wpd {
  --wpd-bg: var(--brand-surface, #ffffff);
  --wpd-radius: 0.75rem;
  --wpd-padding: 2rem;
  --wpd-gap: 1rem;
  --wpd-text-color: var(--brand-ink, #111111);
  --wpd-muted-color: var(--brand-ink-muted, #555555);
  --wpd-position-color: var(--brand-accent, #1e5fcf);
  --wpd-position-size: 4rem;
  --wpd-referral-bg: var(--brand-surface-alt, #f4f4f4);
  --wpd-referral-radius: 0.5rem;
  --wpd-copy-bg: var(--brand-accent, #1e5fcf);
  --wpd-copy-color: #ffffff;
  --wpd-copy-radius: 0.375rem;
  --wpd-copy-hover-bg: color-mix(in srgb, var(--wpd-copy-bg) 88%, black);
  --wpd-border: 1px solid color-mix(in srgb, var(--wpd-text-color) 12%, transparent);
  --wpd-transition: 140ms ease;
}