Skip to content

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

Free

Signup Form Dialog for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not create the account.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Dialog>
  <DialogTrigger :asChild="true">
    <Button variant="outline">Sign Up</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Create an account</DialogTitle>
      <DialogDescription>
        Enter your details below to create your account.
      </DialogDescription>
    </DialogHeader>
    <FieldGroup>
      <Field>
        <FieldLabel>Full name</FieldLabel>
        <Input autoComplete="name" name="name" placeholder="John Doe" type="text" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input autoComplete="email" name="email" placeholder="you@example.com" type="email" />
      </Field>
      <Field>
        <FieldLabel>Password</FieldLabel>
        <Input autoComplete="new-password" name="password" type="password" />
      </Field>
      <Button class="w-full">Create Account</Button>
      <FieldSeparator>Or continue with</FieldSeparator>
      <Button class="w-full" variant="outline">
        <GoogleIcon data-icon="inline-start" />Continue with Google
      </Button>
    </FieldGroup>
    <DialogFooter class="sm:justify-center">
<!-- 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

Sets asChild. The rest is on the Dialog page.

Button

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

Field

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

Input

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

All 17 dialog examples