👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Account Backup Codes
Two-factor authentication backup codes with generation, display, download, print, and regeneration functionality for account recovery
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Losing your phone shouldn't lock you out. This React backup codes panel generates one-time recovery codes for 2FA emergencies when authenticator apps are unavailable. Built with shadcn/ui Card, Badge, Button, and Alert components with Lucide React icons, users can generate 10 backup codes, copy individually or all at once, download as text file, print for safekeeping, and see which codes have been used. Clear warnings about single-use nature, regeneration confirmations, and secure storage reminders—perfect for user dashboards, account security settings, or any app with 2FA where account recovery options prevent support escalations.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/account-backup-codes-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/account-backup-codes-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/account-backup-codes-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/account-backup-codes-01.jsonRelated blocks you will also like
Account Security Settings
Password and 2FA management
Account Activity Log
View account activity history
Account Email Preferences
Email address management
Account API Keys
API key management
Account Danger Zone
Delete or deactivate account
Account Privacy Settings
Privacy and data control