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 only — React, from @krizaka/ui/decision-list. Beta: its API may still change in a minor version.
When to use
- 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.
When not to use
- For reasons that each lead to their own page.Use instead: Argument card
- For steps the reader follows in order.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 { DecisionList } from "@krizaka/ui/decision-list";Examples
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 | Default | Description |
|---|---|---|---|
decisionsrequired | readonly Decision[] | — | The decisions, in order. |
labelsrequired | { 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]). |
Accessibility
- 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.
Best practices
- 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).
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on 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.
Landscape
The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.