A. Auth & Onboarding

OTP / 2FA Verification

One-time codes, authenticator setup, backup codes, trusted devices and every error state in between.

9 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add auth/otp

01OTP — Enter verification code

Uses: OtpCodeInput · TextLinkRow · Button

components/blocks/auth/otp/01-enter-code.tsx

Uses: OptionRowGroup · Button

components/blocks/auth/otp/02-choose-method.tsx

Uses: OtpCodeInput · Stepper · Button

components/blocks/auth/otp/03-setup-authenticator.tsx

Uses: BackupCode · Button · InlineNote

components/blocks/auth/otp/04-backup-codes.tsx

Uses: Checkbox · Button · UserInfo

components/blocks/auth/otp/05-trust-device.tsx

Uses: Input · TextLinkRow · Button

components/blocks/auth/otp/06-recovery-code.tsx

Uses: OtpCodeInput · Alert · Button

components/blocks/auth/otp/07-code-expired.tsx

Uses: Button · TextLinkRow

components/blocks/auth/otp/08-verification-successful.tsx

Uses: Button · TextLinkRow · Badge

components/blocks/auth/otp/09-enable-2fa-prompt.tsx