MFA Code plays out two factor entry: a six digit code fills its boxes one by one with a focus pop on each, a typing indicator flickers below, and the form resolves into a verified state before looping. Built with Framer Motion and React. Card copy is prop driven, making it a ready tile for MFA and security feature sections.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import MfaCode from "@/components/pro/blocks/mfa-code";<MfaCode />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cardTitle | string | "Multifactor Authentication" | Title shown in the card overlay. |
cardDescription | string | "Each user's self-serve multifactor settings are enforced automatically." | Description shown in the card overlay. |