Skip to content

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

Free

Signin Form Dialog for Ark UI

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, Ark 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 asChild>
    <Button variant="outline">Sign In</Button>
  </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>Email</FieldLabel>
        <Input
          autoComplete="email"
          name="email"
          placeholder="you@example.com"
          type="email"
        />
      </Field>
      <Field>
        <FieldLabel>Password</FieldLabel>
        <Input
          autoComplete="current-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

Sets asChild. The rest is on the Dialog page.

Button

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

Field

Sets orientation="horizontal". The rest is on the Field page.

Input

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

Checkbox

Sets name="remember". The rest is on the Checkbox page.

All 17 dialog examples