6.9k

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

<div class="grid min-h-svh lg:grid-cols-2">
  <div class="flex flex-col gap-4 p-6 md:p-10">
    <div class="flex justify-center gap-2 md:justify-start">
      <a href="#/" class="flex items-center gap-2 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>
    </div>
    <div class="flex flex-1 items-center justify-center">
      <div class="w-full max-w-xs">
        <SignupForm />
      </div>
    </div>
  </div>
  <div class="bg-muted relative hidden lg:block">
    <img
      src="/placeholder.svg"
      alt=""
      class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
    />
  </div>
</div>
signup-02
signup-02
Files
routes/signup-03/+page.svelte 
<script>
  import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
  import SignupForm from "$lib/components/signup-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-sm 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>
    <SignupForm />
  </div>
</div>
signup-03
signup-03
Files
routes/signup-04/+page.svelte 
<script>
  import SignupForm from "$lib/components/signup-form.svelte";
</script>

<div class="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
  <div class="w-full max-w-sm md:max-w-4xl">
    <SignupForm />
  </div>
</div>
signup-04
signup-04
Files
routes/signup-05/+page.svelte 
<script>
  import SignupForm from "$lib/components/signup-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">
    <SignupForm />
  </div>
</div>
signup-05
signup-05