Pro
Biometric prompt
The glyph for confirming with a face or fingerprint scan from the device. Scanning, the corners pulse and a ring turns; on success they fold into a disc and a tick draws; on failure the glyph shakes and turns red.
pnpm dlx shadcn@latest add @caliper/biometric-promptWhen to use
Use it for
- Confirming payments, transfers and sensitive changes with a passkey or WebAuthn.
- Unlock and sign-in screens in apps.
Skip it when
- Claiming a check that is not happening; it shows the state of a real prompt.
- As the only way in; always offer a fallback such as a code.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- One glyph, three outcomes
- The same face and corners carry scanning, success and failure, so the change is a transition, not a swap.
Usage
- Announced
- The state is a status message, and the label says what is being confirmed.
Installation
pnpm dlx shadcn@latest add @caliper/biometric-prompt
Adds its 2 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.
import { BiometricPrompt } from "@/components/ui/biometric-prompt"
The worked example comes with Pro
The 35-line example behind the preview opens here, ready to copy.
- 602 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
BiometricPrompt
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes status semantics, with aria-hidden kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Reauth dialogAsk for the password again without leaving the page: before a sensitive action, or when the session ends with work still open.
- MFA challengeThe second step of sign in: authenticator, text, passkey or recovery code, with a lockout that counts down after too many tries.
- Result iconThe outcome of an operation as a mark that draws itself once: a check, a cross, an exclamation, or a turning arc only while pending.