Thank You

Live demo

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

npx shadcn@latest add @moonarc-pro/thank-you

---
import ThankYou from '@/components/moonarc/pro/ThankYou.astro';
---
<!-- after a signup: the page the form's data-success points at; the record the form lib wrote fills it in -->
<ThankYou
  eyebrow="You're in"
  headline="Thanks, you're on the list."
  copy="We'll write once, the day it opens."
  referralUrl="https://example.com/?ref={ref}"
  back={{ href: '/', label: 'Back home' }}
/>

<!-- or from the server: values you already know, both blocks rendered, no burst -->
<ThankYou
  headline="Thanks, you're on the list."
  position={1284}
  referral="ada-2418"
  referralUrl="https://example.com/?ref={ref}"
  celebrate="none"
>
  <a slot="actions" href="/changelog/">Read the changelog</a>
</ThankYou>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: number-flow, copy-button, confetti.

Props

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Why it is built this way

• The record is sessionStorage['ma:form'], written by the form lib just before it navigates. Nothing deletes it: the storage is per tab already, and a reload shows the same place and link. It is used only when its path is this page (trailing slash ignored), it is under ten minutes old and every value passes: a position is a whole number of 1–15 digits (a number, or the string a service answered with), a referral 1–32 of A–Z a–z 0–9 _ -. Anything else and the whole record is ignored; the server's values stay.
• No URL parameter is ever read: /thanks/?ref=someone-else cannot put a stranger's code in front of the reader, and neither the place nor the code ends up in analytics or the history. Values are written with textContent, never innerHTML.
• celebrate="submit" fires once per record and writes celebrated: true back, so a reload is quiet. The burst is Confetti's event trigger: the attribute and the ma:confetti event in one task, one burst whichever script binds first.
• Under a tone the cards point CopyButton's tokens at the tone's concrete text and plate, and its "Copied" and "Copy failed" faces at that same text (--ma-copy-done, --ma-copy-error): the green and red mixes fell under 4.5 : 1 on brand, and the words say the state. browser.mjs measures both faces and their ring on every tone.
• Confetti's colours are inline on its element (--primary and --chart-1…4, each falling back to the element's own colour), so no CSS chunk order decides them.
• Without any value both blocks stay hidden and the page still reads whole: Formspree and Netlify answer no position, and that is the normal case.

Replaces: Hosted waitlist thank-you pages · Hand-rolled success screens (confetti + copy link). See the migration table.

Related