Signup form

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

npx shadcn add @mantle/signup-form

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/signup-form.tsx, yours to edit.

Usage

Render inside <AuthProvider>; the users service must accept create from unauthenticated callers.

import { SignupForm } from "@/components/mantle/signup-form";

<SignupForm minPasswordLength={12} onSuccess={() => navigate("/welcome")} />;

• withName (default true) adds a name field sent as name.
• minPasswordLength is a client-side check — keep it in line with your server-side schema.
• Validation errors from @mantlejs/schema’s validate() hook (data.errors[].field) are mapped onto the matching fields.

View the source.