Auth layout
An entry screen — sign in, sign up, verify, onboarding: the product's brand panel (its gradient, a promise, a quote) beside a calm form; one column on a phone with the mark above the form.
Web only — React, from @krizaka/ui/auth-layout. Beta: its API may still change in a minor version.
When to use
- Sign-in, sign-up, password reset, email verification.
- The first steps of an onboarding.
When not to use
- For settings once signed in.Use instead: Settings layout
- For a dialog that asks to sign in over a page.Use instead: Dialog
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { AuthLayout } from "@krizaka/ui/auth-layout";Examples
Orochia · sign in
The brand panel with the promise and a creator's words, email and password, a passkey.
Welcome back
Sign in to your studio.
No account yet? Create one
By signing in you accept the terms and the privacy policy.
Onboarding
The steps in words above the current step's form.
Your payout account
Where your earnings go every Monday.
Profile — Done
Payouts — Current step
Identity — Upcoming
Verify an email
The smallest entry screen: a code.
Check your email
We sent a 6-digit code to eric@tremblay.ca.
Props
An entry screen: the product's brand panel beside the form (one column on a phone).
| Prop | Type | Default | Description |
|---|---|---|---|
brandrequired | ReactNode | — | The product's mark and name (<ProductLogo id="orochia" /> Orochia): in the brand panel, and above the form on a phone. |
titlerequired | ReactNode | — | The form's title (Welcome back): the h1. |
aside | ReactNode | — | The brand panel's sentence or quote under the promise (a MascotQuote, a creator's words). |
asideFooter | ReactNode | — | The brand panel's foot (© Krizaka · Montréal). |
description | ReactNode | — | One sentence under the title. |
footer | ReactNode | — | Under the form: the other way (No account yet? Create one). |
legal | ReactNode | — | The fine print at the very bottom (terms, privacy). |
promise | ReactNode | — | The brand panel's promise, large (desktop). |
Accessibility
- The form's title is the page's
h1, insidemain. - The brand panel is decorative on a phone (hidden); its text is read on a desktop.
Best practices
- One primary action (cut, shimmer) at full width; the alternatives as secondary buttons under it.
- The promise in five words, a real person's sentence under it.
- Autocomplete on every field (
email,current-password,one-time-code).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
App shell
The shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title and actions, the content.
Dashboard layout
A dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.