96.5k
New Components: Field, Input Group, Item and more

Building Blocks for the Web

Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

Browse BlocksAdd a block
Files
app/otp/page.tsx
import { OTPForm } from "@/components/otp-form"

export default function OTPPage() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-xs">
        <OTPForm />
      </div>
    </div>
  )
}
A simple OTP verification form.
otp-01
otp-01
Files
app/otp/page.tsx
import { OTPForm } from "@/components/otp-form"

export default function OTPPage() {
  return (
    <div className="flex min-h-svh w-full">
      <div className="flex w-full items-center justify-center p-6 lg:w-1/2">
        <div className="w-full max-w-xs">
          <OTPForm />
        </div>
      </div>
      <div className="relative hidden w-1/2 lg:block">
        <img
          alt="Authentication"
          className="absolute inset-0 h-full w-full object-cover"
          height={1080}
          src="/placeholder.svg"
          width={1920}
        />
      </div>
    </div>
  )
}
A two column OTP page with a cover image.
otp-02
otp-02
Files
app/otp/page.tsx
import { GalleryVerticalEnd } from "lucide-react"

import { OTPForm } from "@/components/otp-form"

export default function OTPPage() {
  return (
    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
      <div className="flex w-full max-w-xs flex-col gap-6">
        <a href="#" className="flex items-center gap-2 self-center font-medium">
          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
            <GalleryVerticalEnd className="size-4" />
          </div>
          Acme Inc.
        </a>
        <OTPForm />
      </div>
    </div>
  )
}
An OTP page with a muted background color.
otp-03
otp-03
Files
app/otp/page.tsx
import { OTPForm } from "@/components/otp-form"

export default function OTPPage() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm md:max-w-3xl">
        <OTPForm />
      </div>
    </div>
  )
}
An OTP page with form and image.
otp-04
otp-04
Files
app/otp/page.tsx
import { OTPForm } from "@/components/otp-form"

export default function OTPPage() {
  return (
    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
      <div className="w-full max-w-sm">
        <OTPForm />
      </div>
    </div>
  )
}
A simple OTP form with social providers.
otp-05
otp-05