React magic link login pageMagic Link Login Page With OTP Code as Postage Stamps
React magic link login page: a passwordless React login page told as a letter: the email is typed onto an envelope, sending it lands a dated postmark, and the six-digit code is entered into a strip of six postage stamps.
Features
- On airmail blue, the email is typed straight onto a white envelope's address line in typewriter type
- Sending lands a postmark across the stamp with today's real date and time, then the letter leaves the page
- The one-time code is six postage stamps over one real input, so paste and the keyboard's code suggestion work
- A wrong code shakes the strip, clears it and says why; a right one lets the visitor in
- Resend and use-a-different-email actions, announced state changes and visible focus
- Takes async onSend and onVerify; motion is skipped for reduced motion
Best for: Products that sign people in with a magic link or one-time code and want the wait for the email to feel like part of the product.
Installation
npm install motion lucide-react clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stamp | ReactNode | - | The mark printed on the postage stamp. |
| sender | { name: string; lines: string[] } | - | The return address on the envelope. |
| origin | string | - | The office on the postmark's rim. |
| address | object | - | The first step's headline, copy, field label and button, and the envelope's small labels. |
| code | object | - | The second step's headline, copy with {email}, the code's label, the error, and the resend and change actions. |
| success | { title; description; action: { label; href } } | - | What the page says once the code is accepted. |
| onSend | (email: string) => Promise<void> | - | Sends the link and code. |
| onVerify | (code: string) => Promise<boolean> | - | Checks the code: true lets the visitor in. |
| className | string | - | Classes on the page. |
FAQ
Is the Magic Link Login Page With OTP Code as Postage Stamps free to use?
Yes. Magic Link Login Page With OTP Code as Postage Stamps is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Magic Link Login Page With OTP Code as Postage Stamps work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Magic Link Login Page With OTP Code as Postage Stamps in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Magic Link Login Page With OTP Code as Postage Stamps need installed?
motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Magic Link Login Page With OTP Code as Postage Stamps accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.