Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Signup Form Dialog for React

A sign-up dialog with name, email, and password, then Continue with Google, and a footer link to sign in.

Sign Up opens Create an account. The fields are Full name, Email, and Password, then a full-width Create Account button. A divider reads Or continue with, and Continue with Google sits under it. The footer links to Sign in.

Use it when creating an account should not leave the page. Google does not sign anyone in until you connect it. Terms and extra fields fit a Sheet. In React, Base UI does not create the account.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Sign Up</DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Create an account</DialogTitle>
      <DialogDescription>
        Enter your details below to create your account.
      </DialogDescription>
    </DialogHeader>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="signup-form-name">Full name</FieldLabel>
        <Input
          autoComplete="name"
          id="signup-form-name"
          name="name"
          placeholder="John Doe"
          type="text"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="signup-form-email">Email</FieldLabel>
        <Input
          autoComplete="email"
          id="signup-form-email"
          name="email"
          placeholder="you@example.com"
          type="email"
        />
      </Field>
      <Field>
{/* The rest of the file is under Installation. */}

FAQ

How do I validate the fields?

On blur and on submit: a valid email, a password of at least eight characters, a name. Show each error in a FieldError and keep Create Account disabled until everything passes.

Should I show password strength?

It helps people pick a good one: a short meter under the field, with the hint in a FieldDescription.

How does Continue with Google work?

It starts your provider's OAuth flow; the button only needs the redirect. The Google mark is a monochrome icon marked data-icon="inline-start".

Will browsers suggest a password?

Yes. The password input sets autoComplete="new-password", which tells browsers and password managers to offer a strong one.

What if the email already has an account?

Say so and offer to sign in, with the email kept; on public sites, a neutral message avoids revealing which emails are registered.

Should people accept the terms?

Usually: add a checkbox linking your terms and privacy policy, and disable Create Account until it's checked.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline" and variant="link". The rest is on the Button page.

Field

Sets htmlFor="signup-form-name", htmlFor="signup-form-email" and htmlFor="signup-form-password". The rest is on the Field page.

Input

Sets autoComplete="name", id="signup-form-name", name="name", placeholder="John Doe", type="text" and autoComplete="email". The rest is on the Input page.

All 17 dialog examples