An ultra-minimal sign-in on warm paper: a large serif greeting whose words rise in, underline fields with floating labels that draw an ink line on focus, and a pill submit button.
Your drafts, notes and reading list are right where you left them. Sign in to keep writing.
npx shadcn@latest add https://hyperblur.dev/r/login-minimal-line.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-minimal-line.tsx.
import { LoginMinimalLine } from "@/components/hyperblur/login-minimal-line"
<LoginMinimalLine greeting="Good morning, *Sam.*" onSubmit={(v) => login(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Folio" | Small brand label above the greeting. |
| greeting | string | "Good to see you *again.*" | Large greeting. Wrap one word in asterisks to set it in italic accent. |
| note | string | "Your drafts, notes and reading list..." | Paragraph under the greeting. |
| submitLabel | string | "Sign in" | Submit button text. |
| onSubmit | (values: { email: string; password: string }) => boolean | void | Promise<boolean | void> | Called with valid values. Return false to show an error. | |
| forgot | { label: string; href: string } | { label: "Forgot?", href: "#forgot" } | Link inside the password field. |
| signup | { label: string; href: string } | { label: "Create one", href: "#signup" } | Sign-up link next to the button. |
| accent | string | "#c2410c" | Accent color for buttons, focus rings and highlights. |