Decision list
The decisions behind a product, numbered: what was chosen, large, then side by side what was refused, why, and what it costs the reader — each with its mark and its colour.
Web uniquement — React, depuis @krizaka/ui/decision-list. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A product's or a building block's design decisions, explained to the people who will live with them.
- Any choice where the cost to the reader must be said as plainly as the benefit.
Quand ne pas l’utiliser
- For reasons that each lead to their own page.À la place : Argument card
- For steps the reader follows in order.À 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 { DecisionList } from "@krizaka/ui/decision-list";Exemples
A product's decisions
Local inference and zero telemetry: chosen, refused, why, and what it costs.
We chose
Local inference by default.
We refused
A hosted API as the default path.
Because
A prompt that never leaves cannot leak.
What it costs you
You need a GPU, or patience on a CPU.
We chose
Zero telemetry.
We refused
Anonymous usage statistics.
Because
Anonymous rarely stays anonymous.
What it costs you
You tell us what breaks: we cannot see it.
Props
Numbered decisions: chose, then refused · because · what it costs, side by side.
| Prop | Type | Défaut | Description |
|---|---|---|---|
decisionsrequis | readonly Decision[] | — | The decisions, in order. |
labelsrequis | { chose: ReactNode; refused: ReactNode; because: ReactNode; cost: ReactNode; } | — | The four labels: { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" }. |
reveal | boolean | true | Each decision rises once into place, staggered ([data-reveal]). |
Accessibilité
- An ordered list: the number is decorative, the list says the order.
- Each part has its label in words; the marks (✓ ✕ → !) and the colours only repeat them.
Bonnes pratiques
- Always fill the cost: a decision without its cost is an advertisement.
- One sentence per part; the choice first, in words a newcomer understands.
- The four labels arrive as props (
We chose,We refused,Because,What it costs you).
Composants liés
Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Code block
A code sample: its language and file name, the code highlighted on the tokens (it scrolls sideways, never shrinks) and a copy button that says it copied — CodeTabs puts several build tools side by side.
Link card
An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.