Sign up

Present account creation without owning auth logicLink to section

SignUpPanel composes a focused account-creation surface from content and controls supplied by your application. Use it for credentials, provider actions, consent copy and next-step links while your product keeps ownership of validation, account creation and authentication.

Canonical identityLink to section

• Category: Authentication, slug auth.
• Block: sign-up, export SignUpPanel.
• Canonical source: apps/marketing/content/blocks/auth/sign-up/.
• Complete entry point: index.tsx.

Copy sourceLink to section

Configure the public UI package and tokens, then create src/components/blocks/sign-up/index.tsx in your application. Use the Source tab's copy button when available.

If clipboard access is unavailable, select the code manually.

The Preview tab renders the real canonical SignUpPanel through a deterministic local fixture. It creates no account, starts no provider flow and performs no network request. The Source tab is the complete canonical file included at build time, not a duplicated implementation.

Install by copying sourceLink to section

Keep the complete file at the application-owned path above. Copying source does not create auth routes, provider configuration, accounts or persistence. Wire the supplied controls to your own application behavior, then validate it in your application.

"use client";

import { SignUpPanel } from "./blocks/sign-up";

export function SignUpScreen() {
  return (
    <SignUpPanel
      description="Create the account your workspace will use."
      form={
        <form
          className="space-y-4"
          onSubmit={(event) => event.preventDefault()}
        >
          <label className="grid gap-2 text-sm">
            Email
            <input
              className="rounded-md border bg-background px-3 py-2"
              name="email"
              type="email"
              autoComplete="email"
            />
          </label>
          <button className="rounded-md border px-4 py-2" type="submit">
            Create account
          </button>
        </form>
      }
      consent={
        <span>
          By continuing, you accept your application's terms and privacy policy.
        </span>
      }
      footer={<a href="/sign-in">Already have an account? Sign in</a>}
    />
  );
}

Use "use client" only where your consumer implementation needs handlers or client auth state. The canonical Block contains no account-creation state machine.

What the application ownsLink to section

form is required. Optional providers, error, consent, footer, title, description and className let you adapt the composition without moving product rules into PyColors.

Provider controls and links retain their native behavior because the Block renders your React nodes unchanged. Keep validation messages truthful and enforce password, verification, duplicate-account, legal-consent and anti-abuse rules in your validated application/backend.

Responsive and accessibility notesLink to section

Keep each field labelled, retain native form submission semantics and make consent text understandable before the user submits. Error content uses role="alert"; supply it only when an actual consumer error needs attention. Review keyboard focus, touch targets, long legal copy and narrow widths in your application.

Ownership and updatesLink to section

Your application owns the copied source and does not receive automatic updates. Review later canonical changes deliberately and validate it in your application before adoption.

Boundaries and next stepsLink to section

No account persistence, Auth.js configuration, OAuth setup, verification email, password policy, session mutation, authorization, analytics, billing or production service is implemented here.

Explore the Blocks catalog, use Sign in for returning users, or compare Starters for a complete application foundation.