Sign Up

Card-based signup with Base UI Form, password rules, alert errors, toast success states, and overlay-ready behavior.

components/ui/auth.tsxexportSignupBlock

blockformauth

Loading preview...

Installation

Run the following command to add the component to your project:

npx baseui-cn add signup

Running the install command above also adds components/ui/auth.tsx and exports SignupBlock. The success state uses ToastProvider, so keep the toast provider mounted once in your root layout.

Usage

import { SignupBlock } from "@/components/ui/auth"

<SignupBlock
  termsHref="/terms"
  privacyHref="/privacy"
  onSubmit={async ({ email }) => {
    if (email.endsWith("@taken.dev")) {
      return {
        status: "error",
        message: "That email is already in use.",
        fieldErrors: {
          email: "Try another email address.",
        },
      }
    }

    return {
      status: "success",
      message: "Your account is ready.",
    }
  }}
/>

Success Toast

Loading preview...

The default demo submit is intentionally production-shaped: it behaves asynchronously and dispatches a toast while keeping all validation inside Base UI primitives.

Props

Prop	Type	Default	Description
`onSubmit`	`(values: SignupValues) => Promise<AuthSubmitResult<SignupFieldName> \| void> \| AuthSubmitResult<SignupFieldName> \| void`	—	Optional submit handler. Without it, the block runs a built-in async demo success flow.
`termsHref`	`string`	`'/terms'`	Link used in the terms acknowledgment row.
`privacyHref`	`string`	`'/privacy'`	Link used in the privacy policy reference.
`signInHref`	`string`	`'/login'`	Link used in the footer prompt below the signup card.
`showSocial`	`boolean`	`true`	Shows built-in social buttons when provider callbacks are supplied.
`variant`	`'default' \| 'bordered' \| 'elevated' \| 'minimal'`	`'default'`	Controls the card presentation.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls spacing, typography, and form control sizing.
`animation`	`'none' \| 'fade' \| 'slide-up' \| 'scale'`	`'fade'`	Controls entry motion for the block.
`successToast`	`{ title?: string; description?: string; timeout?: number }`	—	Overrides the success toast content used after a successful submit.