Skip to content

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

Free

Signin Form Dialog for React

A sign-in dialog with email and password, Remember me, a Forgot password link, and a line that links to sign up.

Sign In opens Welcome back. The fields are Email and Password, with Remember me and Forgot password on one row. A full-width Sign In button sits under them, then a line that links to Sign up.

Use it when sign-in should return people to the same screen. Remember me does not persist anything here. A visit that is only sign-in can be a page, or a Drawer on a phone. In React, Base UI does not sign anyone in.

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 In</DialogTrigger>
  <DialogContent className="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Welcome back</DialogTitle>
      <DialogDescription>
        Enter your credentials to access your account.
      </DialogDescription>
    </DialogHeader>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="signin-form-email">Email</FieldLabel>
        <Input
          autoComplete="email"
          id="signin-form-email"
          name="email"
          placeholder="you@example.com"
          type="email"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="signin-form-password">Password</FieldLabel>
        <Input
          autoComplete="current-password"
          id="signin-form-password"
          name="password"
          type="password"
        />
      </Field>
      <div className="flex items-center justify-between gap-4">
        <Field orientation="horizontal">
{/* The rest of the file is under Installation. */}

FAQ

How does Remember me work?

It's a Checkbox with a name, so its value submits with the form. Your server uses it to issue a longer-lived session.

Will password managers fill it?

Yes. The inputs set autoComplete="email" and autoComplete="current-password", which is what password managers look for.

Where should Forgot password? go?

To a reset form, in this dialog or a page. It's a link-style Button here; wire it to your flow.

How do I show a failed sign-in?

Keep the dialog open and show the error under the fields with a FieldError. Rate-limit repeated attempts on the server.

Can I add Google or other providers?

Yes, below the main button with a FieldSeparator, as the Signup Form dialog example does.

Does the email field get focus on open?

The dialog moves focus inside when it opens. Give the email input autoFocus to land straight on it.

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="signin-form-email", htmlFor="signin-form-password", orientation="horizontal" and htmlFor="signin-form-remember". The rest is on the Field page.

Input

Sets autoComplete="email", id="signin-form-email", name="email", placeholder="you@example.com", type="email" and autoComplete="current-password". The rest is on the Input page.

Checkbox

Sets id="signin-form-remember" and name="remember". The rest is on the Checkbox page.

All 17 dialog examples