Verify Email Card React component
A check-your-inbox screen after sign-up: an animated envelope with a sent counter, the masked address with an inline fix for typos, open email app, an I've-clicked-the-link check that tells people when it isn't done yet, a resend with cooldown and limit, tips for finding the email, and a verified state with a small burst.
About the Verify Email Card component
Verify Email Card is the screen people see right after signing up, while they go and click the link in their inbox. It keeps them oriented and fixes the most common reasons verification gets stuck.
A typo in the address can be corrected in place, the email can be resent after a short wait, and tips explain where it might have landed. When they come back and press the check button, the card either confirms the address with a small celebration or tells them it isn't done yet.
When to use it
Use it after sign-up, after changing an account email, or anywhere an address must be confirmed before continuing.
If you send a numeric code instead of a link, use the OTP / Verification Code Block.
Installation
Add the Verify Email Card component to your project with the shadcn CLI. It lands in components/verify-email-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/verify-email-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<VerifyEmailCard /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| string | "lena@nexora.io" | |
| sender | string | "noreply@nexora.io" |
| onCheck Return true once the address is verified. The demo says no the first time. | () => Promise<boolean> | boolean | — |
| onResend | (email: string) => Promise<void> | void | — |
| onChangeEmail | (email: string) => Promise<void> | void | — |
| onContinue | () => void | — |
| resendSeconds | number | 30 |
| maxResends | number | 3 |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- emailstringDefault: "lena@nexora.io"
- senderstringDefault: "noreply@nexora.io"
- onCheck
Return true once the address is verified. The demo says no the first time.
() => Promise<boolean> | boolean - onResend(email: string) => Promise<void> | void
- onChangeEmail(email: string) => Promise<void> | void
- onContinue() => void
- resendSecondsnumberDefault: 30
- maxResendsnumberDefault: 3
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Verify Email Card FAQ
- How does it know the email is verified?
- Pass onCheck and return whether the address is verified. You can also call it on a timer or from a websocket message and move to the verified screen automatically.
- Why does the demo say not yet the first time?
- So you can see that state. Without onCheck the first check fails and the second succeeds.
- Can people fix a typo in their email?
- Yes. Wrong address? opens an inline field. onChangeEmail receives the new address, and the card resets the resend counter and shows where the new link went.
- How is resending limited?
- Each send starts a cooldown (resendSeconds) and maxResends caps the total. Enforce the same limits on your server to stop abuse.
- Is it accessible?
- Status changes and the not-yet message are announced, the tips are a disclosure with aria-expanded, the edit field is labelled with aria-invalid, and the animations are skipped with reduced motion.
