Login 01 - Centered card

v0.1.4

Single-column sign-in card: brand slot, email + password, remember-me, forgot-password link, inline error and loading states.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/login-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/checkbox, @signalos/label, @signalos/text-field) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@latest add @signalos/login-01
// mount the pulled page in a route, e.g. src/app/login/page.tsx
import { Login01 } from "@/components/blocks/login-01/Login01"

export default function Page() {
  return <Login01 />
}

Props

LoginCredentials

Prop	Type	Default	Description
email*	`string`	-
password*	`string`	-
remember	`boolean \| undefined`	-	Present only when the remember-me checkbox is rendered.

Login01Props

Prop	Type	Default	Description
brand	`ReactNode`	-	Brand block above the form (logo + name).
title	`string \| undefined`	"Sign in"
subtitle	`string \| undefined`	"Enter your credentials to access your workspace."
onSubmit*	`(credentials: LoginCredentials) => void`	-	Called with the entered credentials on submit.
isLoading	`boolean \| undefined`	-	Disables the form and shows a spinner label on the button.
error	`string \| null \| undefined`	-	Error message shown above the form (e.g. "Invalid credentials").
showRemember	`boolean \| undefined`	true	Renders the remember-me checkbox.
onForgotPassword	`(() => void) \| undefined`	-	Renders the forgot-password link and receives its click.
footer	`ReactNode`	-	Footer slot under the card (e.g. sign-up prompt, legal links).
className	`string \| undefined`	-

More Login variants

Changelog

login-01

0.1.4

Compose the TextField widget for the email and password inputs instead of hand-rolled Label + Input markup, matching the shared error/disabled/focus styling used across the registry. No prop, testid, or visual change.

0.1.3

Use semantic status tokens (text-text-error, bg-bg-warning, border-border-, bg-status-) instead of raw palette scales so client theme overrides restyle status colors.

0.1.2

Content sync fix to bring source in line with published registry payload.

0.1.1

Standardize inline comment formatting (em dash → hyphen); no runtime or API change.

0.1.0

Initial release: centered-card sign-in page composed from @signalos primitives (input, label, checkbox, button) with error/loading states and brand/footer slots.