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 uniquement — React, depuis @krizaka/ui/auth-layout. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Sign-in, sign-up, password reset, email verification.
- The first steps of an onboarding.
Quand ne pas l’utiliser
- For settings once signed in.À la place : Settings layout
- For a dialog that asks to sign in over a page.À la place : Dialog
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { AuthLayout } from "@krizaka/ui/auth-layout";Exemples
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 | Défaut | Description |
|---|---|---|---|
brandrequis | ReactNode | — | The product's mark and name (<ProductLogo id="orochia" /> Orochia): in the brand panel, and above the form on a phone. |
titlerequis | 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). |
Accessibilité
- 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.
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.