otp-04.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-04",
  "title": "OTP 04",
  "description": "An OTP page with form and image.",
  "registryDependencies": [
    "button",
    "card",
    "input-otp",
    "label",
    "field"
  ],
  "files": [
    {
      "path": "registry/radix-lyra/blocks/otp-04/page.tsx",
      "content": "import { OTPForm } from \"@/registry/radix-lyra/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/otp/page.tsx"
    },
    {
      "path": "registry/radix-lyra/blocks/otp-04/components/otp-form.tsx",
      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\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                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "authentication",
    "otp"
  ],
  "type": "registry:block"
}