Minimal login
The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code.
@quill
The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code.
@quill
registry/blocks/login-minimal.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’ll email you a one-time code. No password needed.
</p>
</form>
)
}
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.
