# Minimal login

> The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code.

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

- Page, with a live preview: https://shadcn.exchange/r/quill/login-minimal
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/login-minimal-light-f49bb48e19b0549e.png
- Registry item: https://www.quilldesignsystem.com/r/login-minimal.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-minimal.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: `input`, `label`, `button`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code. Do: Reserve the bare, uncontained layout for cases where the surrounding page or modal already frames it. Don't: Drop this pattern directly onto a busy page background with nothing to separate it visually. Use login when you're collecting a password, not sending a one-time code — this pattern has no password field at all. Use login-oauth when you want a provider-first flow instead of email-only. Use otp-verification when the user already submitted their email and you're now showing the six-digit code entry — that's a separate step from this one.

## Files

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

```tsx
'use client'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Icon } from '@/components/ui/icon'

/** The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code. */
export function Minimal() {
  return (
    <form className="flex w-[320px] flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
      <div className="flex flex-col items-center gap-2 text-center">
        <span className="flex size-9 items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground">
          Q
        </span>
        <h1 className="fraunces-text font-heading text-lg text-foreground">Sign in to Quill</h1>
      </div>
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="min-email">Email</Label>
        <Input id="min-email" type="email" placeholder="you@example.com" />
      </div>
      <Button className="w-full">
        Continue <Icon name="arrow_forward" size={14} />
      </Button>
      <p className="text-center text-xs leading-relaxed text-muted-foreground">
        We&rsquo;ll email you a one-time code. No password needed.
      </p>
    </form>
  )
}
```