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

Building Blocks for the Web

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

Browse Blocks
Files
routes/otp-01/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<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>
otp-01
otp-01
Files
routes/otp-02/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<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>
otp-02
otp-02
Files
routes/otp-03/+page.svelte 
<script>
  import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<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"
      >
        <GalleryVerticalEndIcon class="size-4" />
      </div>
      Acme Inc.
    </a>
    <OTPForm />
  </div>
</div>
otp-03
otp-03
Files
routes/otp-04/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<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>
otp-04
otp-04
Files
routes/otp-05/+page.svelte 
<script>
  import OTPForm from "$lib/components/otp-form.svelte";
</script>

<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>
otp-05
otp-05