# Backup Codes

> Backup Codes for Two-Factor Setup.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/two-factor-setup-4).

- Page, with a live preview: https://shadcn.exchange/r/flx/two-factor-setup-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/two-factor-setup-4-light-fb104db38efa0c6a.png
- Registry item: https://ui.flexnative.com/r/two-factor-setup-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/two-factor-setup-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `card`

## Files

### `registry/intents/auth/two-factor-setup/two-factor-setup-4.tsx`

```tsx
import { CopyIcon, DownloadIcon, KeyRoundIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

const CODES = [
  '4f2a-9c1d',
  '7b3e-0a8f',
  '1d6c-5e2b',
  '9a4f-3c7d',
  '2e8b-6f1a',
  '5c0d-8b3e',
  '3f7a-1d9c',
  '8b2e-4a6f',
]

export function TwoFactorSetup4() {
  return (
    <Card size="sm">
      <CardHeader>
        <div className="bg-primary/10 mb-1 flex size-10 items-center justify-center rounded-full">
          <KeyRoundIcon className="text-primary size-5" />
        </div>
        <CardTitle>Save backup codes</CardTitle>
        <p className="text-muted-foreground text-xs">
          Use one of these if you lose your device. Each code works once. Store
          them somewhere safe.
        </p>
      </CardHeader>

      <CardContent>
        <div className="bg-muted/50 grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-lg border p-3 font-mono text-xs">
          {CODES.map((code) => (
            <span key={code} className="text-foreground/80">
              {code}
            </span>
          ))}
        </div>
      </CardContent>

      <CardFooter className="gap-2">
        <Button variant="outline" className="flex-1">
          <CopyIcon />
          Copy
        </Button>
        <Button variant="outline" className="flex-1">
          <DownloadIcon />
          Download
        </Button>
      </CardFooter>
    </Card>
  )
}
```