# Login 01 - Centered card (`login-01`) - SignalOS page block

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

- **Version:** 0.1.4
- **Kind:** block (group: login) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/login-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/button, @signalos/checkbox, @signalos/label, @signalos/text-field
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/blocks/login-01/Login01.tsx`, `src/components/blocks/login-01/Login01.types.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// 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 | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `email` | `string` | yes | - |  |
| `password` | `string` | yes | - |  |
| `remember` | `boolean \| undefined` | no | - | Present only when the remember-me checkbox is rendered. |

### `Login01Props`

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

## 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.