# Login

> The standard email-and-password sign-in card, with remember-me and a forgot-password escape hatch.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/login).

- Page, with a live preview: https://shadcn.exchange/r/quill/login
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/login-light-c637fde8f498b7d1.png
- Registry item: https://www.quilldesignsystem.com/r/login.json
- Categories: auth
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/login.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `input`, `label`, `button`, `checkbox`

## Notes from the registry

The standard email-and-password sign-in card, with remember-me and a forgot-password escape hatch. Do: Treat "Remember me" as extending session length, never as the only thing standing between a device and the account. Don't: Rely on the remember-me checkbox as a security boundary. Do: Style "Forgot your password?" as a link beneath "Sign in" — one unmistakable primary action per card. Don't: Give "Forgot your password?" the same solid button treatment as "Sign in" — now two buttons compete to be primary. Use login-split-panel when the sign-in is a full page, not an embedded card, and you want a branded testimonial panel alongside it. Use login-minimal when you want the leanest possible sign-in — a single email field for a one-time code, no password at all. Use login-oauth when most of your users sign in through Google, GitHub, or Apple rather than a password you store. Use forgot-password when the user has already clicked "Forgot your password?" — that's a separate card, not a state of this one.

## Files

### `registry/blocks/login.tsx`

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'

/** The standard email-and-password sign-in card, with remember-me and a forgot-password escape hatch. */
export function Login() {
  return (
    <Card className="w-[380px]">
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
        <CardDescription>Welcome back — enter your details to continue.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="login-email">Email</Label>
          <Input id="login-email" type="email" placeholder="you@example.com" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="login-password">Password</Label>
          <Input id="login-password" type="password" placeholder="••••••••" />
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="login-remember" />
          <Label htmlFor="login-remember" className="font-normal">
            Remember me for 30 days
          </Label>
        </div>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button className="w-full">Sign in</Button>
        <Button variant="link" className="w-full">
          Forgot your password?
        </Button>
      </CardFooter>
    </Card>
  )
}
```