caliper uidocs
DemoSign inGet Pro

Magic link form

Pro

Passwordless sign in: one email field, then a check-your-inbox step with resend and a way back to passwords.

Installs components/ui/magic-link-form.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/magic-link-form
Caliper UI

Sign in with email

We will email you a link that signs you in. No password needed.

Try limit@example.com for a rate limit.

When to use #

Use it for

  • Infrequent visitors who forget passwords.
  • Offering a second way in beside a password.

Skip it when

  • People sign in many times a day; a passkey or password is faster.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/magic-link-form

Adds its 9 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { MagicLinkForm } from "@/components/ui/magic-link-form"

The worked example comes with Pro

The 28-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

MagicLinkForm

component
PropTypeDefaultDescription
titlestring"Sign in with email"
descriptionstring"We will email you a link that signs you in. No password needed."
defaultEmailstring""
expiresstring"15 minutes"How long the link lasts, in words.
resendAfternumber30
onSubmit *(email: string) => AuthActionResult | Promise<AuthActionResult>—
onPassword(() => void)—"Use a password instead".
classNamestring—

Accessibility #

It is built on native elements and keeps aria-label in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.