A light passwordless sign-in: an email field that morphs into a Check your inbox state with an envelope that folds shut, a resend countdown and a change email action.
Enter your work email and we'll send you a secure link that signs you in instantly.
We sent a sign-in link to your email. It expires in 15 minutes.
npx shadcn@latest add https://hyperblur.dev/r/auth-magic-link.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-magic-link.tsx.
import { AuthMagicLink } from "@/components/hyperblur/auth-magic-link"
<AuthMagicLink brand="Northwind" onSubmit={async ({ email }) => sendMagicLink(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northwind" | Product name next to the logo. |
| title | string | "Sign in with a link, not a password" | Heading of the email step. |
| subtitle | string | "Enter your work email and we'll send you a secure link..." | Supporting line under the heading. |
| notes | string[] | ["No password to remember", "Link expires in 15 minutes", "Works on every device"] | Up to three floating notes around the card on wide containers. |
| expiresIn | string | "15 minutes" | Link lifetime shown in the footer and the sent state. |
| resendSeconds | number | 30 | Countdown before the link can be sent again. |
| defaultEmail | string | "" | Prefills the email field. |
| alternate | { label: string; href: string } | null | { label: "Use single sign-on", href: "#sso" } | Secondary sign-in link in the card footer. Pass null to hide it. |
| onSubmit | (values: { email: string }) => void | Promise<unknown> | Called with the email after validation. The sent state appears when it returns or its promise resolves; a rejection shows its message. | |
| onResend | (email: string) => void | Promise<unknown> | Called when the user asks for a new link. | |
| accent | string | "#2f7bff" | Focus ring, letter stripe and sent badge color. |