Simple

A centred form with a sign up / log in switch and live password checks.

Last updated October 15, 2026

DesktopMobile

Show code

---
/**
 * Simple: A centred form with a sign up / log in switch and live password checks.
 *
 * @page sign-up
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import NavLink from '@/components/apogee/NavLink/NavLink.astro'
import Input from '@/components/apogee/Input/Input.astro'
import PasswordChecklist from '@/components/apogee/PasswordChecklist/PasswordChecklist.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
---

<AuthShell heading="Create an account" description="Start your 30-day free trial." pattern="grid">
  <FeaturedIcon slot="brand" theme="solid" color="primary" size="large"><Orbit /></FeaturedIcon>

  <nav slot="intro" aria-label="Account" class="grid w-full grid-cols-2 gap-0.5 rounded-md bg-neutral-faded p-0.5 text-sm">
    <NavLink href="#" active class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Sign up</NavLink>
    <NavLink href="#" class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Log in</NavLink>
  </nav>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Name" name="name" placeholder="Enter your name" autocomplete="name" required />
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <div class="flex flex-col gap-3">
        <Input id="new-password" label="Password" type="password" name="password" placeholder="Create a password" autocomplete="new-password" minlength="8" required />
        <PasswordChecklist for="new-password" rules={[{ label: 'At least 8 characters', minLength: 8 }, { label: 'One special character', pattern: '[^A-Za-z0-9]' }]} />
      </div>
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Get started</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign up with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded">
    Already have an account? <Link href="#" underline="hover" class="font-semibold">Log in</Link>
  </p>
</AuthShell>

Add

npx @ava-ui/apogee add sign-up/simple

This copies the page to src/components/apogee/pages/sign-up/ with everything it uses: AuthShell, Button, FeaturedIcon, Input, Link, PasswordChecklist, Tabs. Render it from one of your routes, or use Copy code above.

Accessibility

The page heading is the h1; the fields carry visible labels and autocomplete hints (new-password for new passwords, so password managers offer to generate one).
The password rules sit under the field and are part of its description; the field stays invalid until they hold. See PasswordChecklist.
The SSO button is a link to your identity provider; swap its href for your own.