How-it-works page
How a product works, told in steps along a numbered line — each step its words beside its visual, the sides alternating on a wide screen.
Web uniquement — React, depuis @krizaka/ui/how-it-works-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The journey of a request, an onboarding, an installation.
- Any process told in three to seven steps.
Quand ne pas l’utiliser
- For a product's overview.À la place : Product page
- For a step the user is on right now.À la place : Stepper
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { HowItWorksPage } from "@krizaka/ui/how-it-works-page";Exemples
Orazaka's journey
Install, guard, answer — each with its command.
How it works
The journey of a request
Six stages, the same for every request — and none of them leaves your server.
Install
One command pulls the engine, the models you choose and the console.
bashTerminal npx orazaka installGuard
Every request crosses the same interceptors: identity, quotas, the rules of your workspace.
bashTerminal orazaka rules add --deny pii-exportAnswer
The best local model answers; the answer is checked before it is shown.
bashTerminal orazaka chat --model llama3.3
Props
How a product works: the hero, a numbered timeline of steps with their visuals, then the details.
| Prop | Type | Défaut | Description |
|---|---|---|---|
stepsrequis | readonly HowStep[] | — | The steps, in order. |
stepsLabelrequis | string | — | The steps' accessible name (The steps). |
titlerequis | ReactNode | — | The page's h1. |
aside | ReactNode | — | Beside the hero: the page's bird or an illustration. |
back | { href: string; label: string; } | — | The way back to the product. |
brand | string | — | The brand the page wears (.brand-<id>). |
closing | { title: ReactNode; body?: ReactNode; actions: ReactNode; } | — | The closing call. |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One or two sentences under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
Accessibilité
- The steps are an ordered list; each title an
h2. - The line and the numbers are decorative: the list says the order.
Bonnes pratiques
- Three to seven steps; a step's title says what happens, in a few words.
- Each visual shows the step for real: a command, a schema, a screen.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
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