8.7k
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 Vue frameworks. Open Source. Free forever.

Files
pages/otp/index.vue
<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-xs">
      <OTPForm />
    </div>
  </div>
</template>
A simple OTP verification form.
otp-01
Files
pages/otp/index.vue
<script setup lang="ts">
import OTPForm from "~/registry/new-york-v4/blocks/otp-02/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full">
    <div class="flex w-full items-center justify-center p-6 lg:w-1/2">
      <div class="w-full max-w-xs">
        <OTPForm />
      </div>
    </div>
    <div class="relative hidden w-1/2 lg:block">
      <img
        alt="Authentication"
        class="absolute inset-0 h-full w-full object-cover"
        height="{1080}"
        src="/placeholder.svg"
        width="{1920}"
      >
    </div>
  </div>
</template>
A two column OTP page with a cover image.
otp-02
Files
pages/otp/index.vue
<script setup lang="ts">
import { GalleryVerticalEnd } from "lucide-vue-next"

import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
    <div class="flex w-full max-w-xs flex-col gap-6">
      <a href="#" class="flex items-center gap-2 self-center font-medium">
        <div class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
          <GalleryVerticalEnd class="size-4" />
        </div>
        Acme Inc.
      </a>
      <OTPForm />
    </div>
  </div>
</template>
An OTP page with a muted background color.
otp-03
Files
pages/otp/index.vue
<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-sm md:max-w-3xl">
      <OTPForm />
    </div>
  </div>
</template>
An OTP page with form and image.
otp-04
Files
pages/otp/index.vue
<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
    <div class="w-full max-w-sm">
      <OTPForm />
    </div>
  </div>
</template>
A simple OTP form with social providers.
otp-05