Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Signup Form Dialog for React

A sign-up dialog with name, email and password fields, a Google option and a link to sign in instead.

Framework
UI library

Signing up shouldn't feel like filling in a tax form. This React dialog asks for a name, email and password, offers Continue with Google, and links to sign in. It's shadcn.io's Dialog on Base UI with Input and Field parts and a FieldSeparator.

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

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.

All 17 dialog examples