Login 02 - Split screen

v0.1.4

Two-column sign-in: form on the left, navy brand panel with headline, subline, and testimonial slot on the right. Panel collapses below lg.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/login-02

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

usage

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

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

Props

LoginCredentials

Prop	Type	Default	Description
email*	`string`	-
password*	`string`	-

Login02Testimonial

Prop	Type	Default
quote*	`string`	-
author*	`string`	-
role	`string \| undefined`	-

Login02Props

Prop	Type	Default	Description
brand	`ReactNode`	-	Brand block at the top of the form column.
title	`string \| undefined`	"Welcome back"
subtitle	`string \| undefined`	"Sign in to continue to your workspace."
onSubmit*	`(credentials: LoginCredentials) => void`	-
isLoading	`boolean \| undefined`	-
error	`string \| null \| undefined`	-
onForgotPassword	`(() => void) \| undefined`	-
footer	`ReactNode`	-	Footer slot under the form.
panelHeadline	`string \| undefined`	"Decisions, with signal."	Headline on the brand panel.
panelSubline	`string \| undefined`	-	Supporting line under the panel headline.
testimonial	`Login02Testimonial \| undefined`	-	Optional testimonial card on the brand panel.
panelExtra	`ReactNode`	-	Extra content on the brand panel (stats, logos).
className	`string \| undefined`	-

More Login variants

Changelog

login-02

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: split-screen sign-in with a brand-navy right panel (headline/subline/testimonial/extra slots), desktop-first (panel hides below lg).