A passkey-first sign-in with a large fingerprint that traces its ridges while a scan line sweeps, a Use passkey button with waiting and success states, and a password form that expands smoothly as a fallback.
Your passkey lives on this device and unlocks Ledgerly with Touch ID, Face ID or your screen lock. Nothing to remember, nothing to phish.
MacBook Pro · last used 2 days ago
What is a passkey?
npx shadcn@latest add https://hyperblur.dev/r/login-passkey.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-passkey.tsx.
import { LoginPasskey } from "@/components/hyperblur/login-passkey"
<LoginPasskey onPasskey={() => navigator.credentials.get({ publicKey }).then(Boolean)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Passwordless by default" | Pill above the heading. |
| title | string | "Sign in with a touch" | Heading before sign-in. |
| subtitle | string | "Your passkey lives on this device..." | Text under the heading. |
| passkeyLabel | string | "Use passkey" | Primary button text. |
| device | string | "MacBook Pro · last used 2 days ago" | Device line under the primary button. |
| defaultExpanded | boolean | false | Start with the password fallback open. |
| onPasskey | () => boolean | void | Promise<boolean | void> | Run your WebAuthn ceremony here. Return or resolve false, or throw, to show the cancelled state. | |
| onSubmit | (values: { email: string; password: string }) => boolean | void | Promise<boolean | void> | Called by the password fallback with valid values. Return false to show an error. | |
| forgot | { label: string; href: string } | { label: "Forgot password?", href: "#forgot" } | Link inside the password fallback. |
| help | { label: string; href: string } | { label: "What is a passkey?", href: "#passkeys" } | Help link at the bottom. |
| accent | string | "#10b981" | Accent color for buttons, focus rings and highlights. |