8.0k New
Trace, Code Block and AI Elements

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="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
        >
          <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="relative hidden bg-muted 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="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted 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="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
      >
        <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="flex min-h-svh flex-col items-center justify-center bg-muted 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="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
  <div class="w-full max-w-sm">
    <SignupForm />
  </div>
</div>
signup-05
signup-05