All blocks
Sign Up

Sign Up blocks.

Onboarding layouts for new accounts and new workspaces.

Sign Up

Sign up 01

A simple account creation form for a focused onboarding step.

Input
Label
Button

Create an account

Enter your details to create your account.

Already have an account? Sign in

blade 
<div class="flex min-h-[600px] items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-sm"><div class="mb-6 text-center"><h1 class="text-2xl font-semibold tracking-tight">Create an account</h1><p class="mt-2 text-sm text-muted-foreground">Enter your details to create your account.</p></div><april:card><slot:content class="space-y-5"><div class="space-y-2"><april:label for="signup-01-name">Name</april:label><april:input id="signup-01-name" placeholder="Sofia Carter" class="w-full" /></div><div class="space-y-2"><april:label for="signup-01-email">Email</april:label><april:input id="signup-01-email" type="email" placeholder="you@example.com" class="w-full" /></div><div class="space-y-2"><april:label for="signup-01-password">Password</april:label><april:input id="signup-01-password" type="password" class="w-full" /></div><april:button type="button" class="w-full">Create account</april:button></slot:content></april:card><p class="mt-5 text-center text-sm text-muted-foreground">Already have an account? <a href="#" class="text-primary underline-offset-4 hover:underline">Sign in</a></p></div>
</div>

Sign Up

Sign up 02

A two-column signup page with a product panel and account form.

Card
Input
Checkbox
Acme Inc.

Join your team

Create your account to join the workspace.

blade 
<div class="grid min-h-[620px] lg:grid-cols-2">
    <div class="flex flex-col p-6 md:p-10"><div class="flex items-center gap-2 font-semibold"><div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground"><x-lucide-layers-3 class="h-4 w-4" /></div>Acme Inc.</div><div class="flex flex-1 items-center justify-center py-12"><div class="w-full max-w-sm"><h1 class="text-2xl font-semibold tracking-tight">Join your team</h1><p class="mt-2 text-sm text-muted-foreground">Create your account to join the workspace.</p><div class="mt-7 space-y-5"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><april:label for="signup-02-first">First name</april:label><april:input id="signup-02-first" /></div><div class="space-y-2"><april:label for="signup-02-last">Last name</april:label><april:input id="signup-02-last" /></div></div><div class="space-y-2"><april:label for="signup-02-email">Email</april:label><april:input id="signup-02-email" type="email" class="w-full" /></div><div class="flex items-start gap-2"><april:checkbox id="signup-02-terms" /><april:label for="signup-02-terms" class="text-xs font-normal leading-5">I agree to the Terms of Service and Privacy Policy.</april:label></div><april:button type="button" class="w-full">Create account</april:button></div></div></div></div>
    <div class="hidden bg-muted lg:block"><div class="flex h-full items-center justify-center p-12"><div class="max-w-sm space-y-4"><p class="text-sm font-medium text-primary">One workspace</p><p class="text-3xl font-semibold tracking-tight">Bring projects, people, and decisions into one clear place.</p><div class="space-y-3 pt-4 text-sm text-muted-foreground"><p class="flex gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Unlimited projects</p><p class="flex gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Simple team permissions</p><p class="flex gap-2"><x-lucide-check class="h-4 w-4 text-primary" />Accessible by default</p></div></div></div></div>
</div>

Sign Up

Sign up 03

A workspace setup form that collects role and project context.

Form
Select
Textarea

Set up your workspace

Complete these details before you invite your team.

We will use this information to personalize your workspace.
blade 
<div class="bg-muted/20 p-6 md:p-10">
    <april:card class="mx-auto w-full max-w-2xl">
        <slot:title>Set up your workspace</slot:title>
        <slot:description>Complete these details before you invite your team.</slot:description>
        <slot:content class="space-y-5">
            <div class="grid gap-4 md:grid-cols-2">
                <div class="space-y-2"><april:label for="onboarding-workspace">Workspace name</april:label><april:input id="onboarding-workspace" value="April Studio" /></div>
                <div class="space-y-2"><april:label for="onboarding-role">Your role</april:label><april:select id="onboarding-role"><option>Product designer</option><option>Developer</option><option>Founder</option></april:select></div>
            </div>
            <div class="space-y-2"><april:label for="onboarding-goal">What are you building?</april:label><april:textarea id="onboarding-goal" class="w-full" placeholder="Tell us about your project."></april:textarea></div>
            <div class="flex items-center gap-3 rounded-md border bg-muted/30 p-3 text-sm"><x-lucide-check class="h-4 w-4 text-primary" /><span>We will use this information to personalize your workspace.</span></div>
        </slot:content>
        <slot:footer class="justify-between gap-3"><april:button type="button" variant="ghost">Skip for now</april:button><april:button type="button">Continue <x-lucide-arrow-right class="ml-2 h-4 w-4" /></april:button></slot:footer>
    </april:card>
</div>

Sign Up

Sign up 04

A muted account creation page with social signup and an email fallback.

Card
Input
Provider
Start free

Create your account

No credit card required.

or
blade 
<div class="flex min-h-[620px] items-center justify-center bg-muted p-6 md:p-10">
    <div class="w-full max-w-md"><div class="mb-7 text-center"><april:badge variant="secondary">Start free</april:badge><h1 class="mt-4 text-2xl font-semibold tracking-tight">Create your account</h1><p class="mt-2 text-sm text-muted-foreground">No credit card required.</p></div><april:card><slot:content class="space-y-4"><div class="grid gap-3 sm:grid-cols-2"><april:button type="button" variant="outline"><x-lucide-github class="mr-2 h-4 w-4" />GitHub</april:button><april:button type="button" variant="outline">Google</april:button></div><div class="flex items-center gap-3 py-2 text-xs text-muted-foreground"><april:separator class="flex-1" /><span>or</span><april:separator class="flex-1" /></div><div class="space-y-2"><april:label for="signup-04-email">Email</april:label><april:input id="signup-04-email" type="email" placeholder="you@example.com" class="w-full" /></div><div class="space-y-2"><april:label for="signup-04-password">Password</april:label><april:input id="signup-04-password" type="password" class="w-full" /></div><april:button type="button" class="w-full">Create account</april:button></slot:content></april:card></div>
</div>

Sign Up

Sign up 05

An invitation flow that lets a user join an existing workspace.

Card
Input
Select

Join a workspace

Enter the invite details from your team.

blade 
<div class="flex min-h-[620px] items-center justify-center bg-muted/20 p-6 md:p-10">
    <april:card class="w-full max-w-lg"><slot:title>Join a workspace</slot:title><slot:description>Enter the invite details from your team.</slot:description><slot:content class="space-y-5"><div class="space-y-2"><april:label for="signup-05-code">Invitation code</april:label><april:input id="signup-05-code" placeholder="NORTHSTAR-2026" class="w-full" /></div><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><april:label for="signup-05-name">Your name</april:label><april:input id="signup-05-name" /></div><div class="space-y-2"><april:label for="signup-05-role">Role</april:label><april:select id="signup-05-role"><option>Designer</option><option>Developer</option><option>Manager</option></april:select></div></div><div class="flex items-start gap-2"><april:checkbox id="signup-05-updates" /><april:label for="signup-05-updates" class="text-sm font-normal leading-5">Send me occasional product updates.</april:label></div><april:button type="button" class="w-full">Join workspace</april:button></slot:content></april:card>
</div>