AuthLayout
Centered card layout for authentication pages (login, register, forgot password).
Category: layout · WCAG 2.1-AA · layout, auth, login, page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Auth form content |
logo | ReactNode | — | Optional logo displayed above the form |
Design tokens
--cascivo-color-bg-subtle--cascivo-color-surface--cascivo-color-border--cascivo-radius-lg--cascivo-space-4--cascivo-space-6--cascivo-space-8
When to use
- Centered card layout for authentication pages — login, register, reset
- Focused single-task pages with an optional logo and minimal chrome
When not to use
- General centered content — use Center
- A full app frame after sign-in — use AppShell or SidebarApp
Examples
Login
Centered auth card with logo
<AuthLayout logo={<img src="/logo.svg" alt="Logo" />}><form>...</form></AuthLayout>