ComponentsData display

Backup codes

One-time recovery codes shown after two-factor enrolment and in security settings: a numbered monospace grid with copy, download as .txt and regenerate. Spent codes stay visible, struck through and announced as used.

components/backup-codes.tsxtheme · material · accent · density · font

Backup codes

10 of 10 left

4K7Q-PX2M
9DTR-H3VA
B6WN-82ZE
JX5C-QM4T
7HLF-R9KD
WE3P-6YUB
M2SG-T8NC
Q9VZ-K4HR
5RDA-JW7X
ZC8E-N3LP

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { BackupCodes } from "@vamos-ui/react";

<BackupCodes codes={codes} used={spent} onRegenerate={regenerate} />

Codes are rendered with translate="no" and select-all, so browser translation never touches them and one click selects a code.

Examples

Used codes

used marks spent codes; the header counts what is left.

Backup codes

5 of 8 left

4K7Q-PX2M
9DTR-H3VA(used)
B6WN-82ZE
JX5C-QM4T
7HLF-R9KD(used)
WE3P-6YUB
M2SG-T8NC
Q9VZ-K4HR(used)

Security settings (admin)

With a warning and regenerate — the button shows a spinner while new codes are issued.

Two-factor authentication is on

Authenticator app added 18 Nov 2026.

Save these somewhere safe

Each code signs you in once if you lose your phone. New codes replace the old ones.

Backup codes

8 of 8 left

WCE3-WESG
7XK8-7XJP
HJPC-HHAW
T5UH-S224
5PYN-4LSB
FA5S-D5JH
QVAX-PNBQ
2GE3-Y83W

API

BackupCodes

Prop	Type	Default
`codes` Codes in display order.	`string[]`	`—`
`used` Spent codes — struck through, "(used)" for screen readers and in the file.	`string[]`	`—`
`title` Group label; null hides the header (label the group yourself).	`ReactNode \| null`	`"Backup codes"`
`filename` Downloaded file name.	`string`	`"backup-codes.txt"`
`fileNote` First line of the copied / downloaded text (service and account).	`string`	`—`
`onCopy` After copying. The status region announces it either way.	`(text) => void`	`—`
`onDownload` Replace the built-in Blob download.	`(text) => void`	`—`
`onRegenerate / regenerating` Shows "New codes" with a loading state.	`() => void / boolean`	`—`
`labels` Dictionary namespace "backupCodes": title, copy, copied, copiedAnnouncement, download, regenerate, used, remaining ("{left} of {total} left"), fileHeader.	`Partial<BackupCodesLabels>`	`—`

Avatar

Badge