{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-verification",
  "title": "OTP verification",
  "description": "A six-digit one-time-passcode entry card for verifying an email, with expiry messaging and a resend action.",
  "registryDependencies": [
    "card",
    "input-otp",
    "label",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/otp-verification.tsx",
      "content": "import {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n} from '@/components/ui/card'\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from '@/components/ui/input-otp'\nimport { Label } from '@/components/ui/label'\nimport { Button } from '@/components/ui/button'\n\n/** A six-digit one-time-passcode entry card for verifying an email, with expiry messaging and a resend action. */\nexport function OtpVerification() {\n  return (\n    <Card className=\"w-[380px]\">\n      <CardHeader className=\"text-center\">\n        <CardTitle>Check your email</CardTitle>\n        <CardDescription>\n          We sent a six-digit code to <span className=\"text-foreground\">ada@example.com</span>.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col items-center gap-3\">\n        <Label htmlFor=\"otp-code\" className=\"sr-only\">\n          Verification code\n        </Label>\n        <InputOTP id=\"otp-code\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n        <p className=\"text-xs text-muted-foreground\">The code expires in 10 minutes.</p>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\n        <Button className=\"w-full\">Verify</Button>\n        <Button variant=\"link\" className=\"w-full\">\n          Didn&rsquo;t get it? Resend code\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/otp-verification.tsx"
    }
  ],
  "meta": {
    "intent": [
      "auth"
    ],
    "use_when": "You need to verify an email with a six-digit one-time passcode and resend.",
    "not_for": "you're sending the initial one-time code, not verifying a code the user already received — that's a separate step upstream of this card → login-minimal; recovery works by emailed link, not a typed code → forgot-password"
  },
  "docs": "A six-digit one-time-passcode entry card for verifying an email, with expiry messaging and a resend action. Do: State the code's expiry window in the card body (\"expires in 10 minutes\"), not just in the email. Don't: Leave users guessing why a code that worked a moment ago now fails. Use login-minimal when you're sending the initial one-time code, not verifying a code the user already received — that's a separate step upstream of this card. Use forgot-password when recovery works by emailed link, not a typed code.",
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}