# Recovery Code 2

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/recovery-code-2).

- Page, with a live preview: https://shadcn.exchange/r/diarmuradi/recovery-code-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/diarmuradi/recovery-code-2-light-f55e8bb9803b1225.png
- Registry item: https://diarmuradi.com/r/recovery-code-2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/recovery-code-2.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: `https://diarmuradi.com/r/styles/base-nova/button.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`, `https://diarmuradi.com/r/styles/base-nova/field.json`, `https://diarmuradi.com/r/styles/base-nova/input.json`

## Files

### `recovery-code.tsx`

```tsx
"use client"

import { useId } from "react"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { FancyButton } from "@/components/ui/fancy-button"
import { ShieldIcon } from 'lucide-react'

export function RecoveryCode() {
  const id = useId()

  return (
    <main
      aria-label="Recovery code"
      className="flex w-full max-w-md flex-col gap-6 rounded-4xl bg-card p-6 text-foreground shadow-elevated-lg motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <div className="flex flex-col items-center gap-4">
        <div className="relative flex size-14 items-center justify-center">
          <div className="absolute inset-0 scale-125 rounded-full bg-primary/10 mask-t-from-20% mask-t-to-100%" />
          <div className="relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset">
            <ShieldIcon  aria-hidden="true" className="size-6 text-primary" />
          </div>
        </div>
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance">
            Recovery code
          </h1>
          <p className="text-base text-muted-foreground">
            Enter the recovery code you saved when setting up your account.
          </p>
        </div>
      </div>

      <FieldGroup className="gap-3">
        <Field className="gap-1">
          <FieldLabel htmlFor={`${id}-recovery-code`}>Recovery code</FieldLabel>
          <Input
            id={`${id}-recovery-code`}
            type="text"
            placeholder="ABCD-EFGH-IJKL-MNOP"
            className="h-10 bg-transparent"
          />
        </Field>

        <FancyButton type="button" size="lg" className="w-full">
          Verify code
        </FancyButton>
      </FieldGroup>

      <Button
        variant="link"
        className="h-auto p-0"
        nativeButton={false}
        role="link"
        render={<Link href="/sign-in" />}
      >
        Back to login
      </Button>
    </main>
  )
}
```