Skip to content

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

Free

Login Card for React

A card titled Login to your account, with email and password fields, Forgot your password?, Login, Login with Google, and a sign-up link.

The title is Login to your account. Email shows the placeholder m@example.com. Password has Forgot your password? beside the label. The buttons are Login and Login with Google, and the footer links to Sign up.

Use a login card on a sign-in page. Put the same form in a Dialog if signing in should not leave the page. On React, Base UI does not check the password.

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

Card anatomy: root, header, title, description, action, content, footer

Usage

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <Field className="gap-2">
      <FieldLabel htmlFor="login-card-email">Email</FieldLabel>
      <Input id="login-card-email" placeholder="m@example.com" type="email" />
    </Field>
    <Field className="gap-2">
      <div className="flex items-center justify-between">
        <FieldLabel htmlFor="login-card-password">Password</FieldLabel>
        <a className="text-sm hover:underline" href="#">
          Forgot your password?
        </a>
      </div>
      <Input id="login-card-password" type="password" />
    </Field>
    <Button className="w-full">Login</Button>
    <Button className="w-full" variant="outline">
      Login with Google
    </Button>
  </CardContent>
  <CardFooter className="justify-center">
    <p className="text-muted-foreground text-sm">
      Don't have an account?{" "}
      <a className="underline" href="#">
        Sign up
{/* The rest of the file is under Installation. */}

FAQ

How are the labels tied to the fields?

Each label and input sit in a Field. FieldLabel points at its input with htmlFor, and the input has the matching id. Clicking a label focuses its field.

How do I submit the form?

Wrap the content in a form, make Login type="submit", and give the inputs a name and required. The demo has no form or handler, so the buttons do nothing yet.

Where is Forgot your password?

In a flex items-center justify-between row with the password label, above the input. It's a plain link: point its href at your reset page.

What are the two buttons?

Login, the default filled button, and Login with Google, variant="outline". Both are w-full. Add your provider's logo before the second label, or more outline buttons for more providers.

How wide is the login card?

Up to max-w-md with w-full, so it fills a phone screen and stops at 28rem. The fields and buttons stack with gap-4, and each label sits gap-2 above its input.

API Reference

Card

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

Field

Sets htmlFor="login-card-email" and htmlFor="login-card-password". The rest is on the Field page.

Input

Sets id="login-card-email", placeholder="m@example.com", type="email", id="login-card-password" and type="password". The rest is on the Input page.

Button

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

All 4 card examples