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 only — React, from @krizaka/ui/how-it-works-page. Beta: its API may still change in a minor version.
When to use
- The journey of a request, an onboarding, an installation.
- Any process told in three to seven steps.
When not to use
- For a product's overview.Use instead: Product page
- For a step the user is on right now.Use instead: Stepper
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { HowItWorksPage } from "@krizaka/ui/how-it-works-page";Examples
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 | Default | Description |
|---|---|---|---|
stepsrequired | readonly HowStep[] | — | The steps, in order. |
stepsLabelrequired | string | — | The steps' accessible name (The steps). |
titlerequired | 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). |
Accessibility
- The steps are an ordered list; each title an
h2. - The line and the numbers are decorative: the list says the order.
Best practices
- 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).
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