import { ProcessKpiStrip } from "@elabs-ai/components-process";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-processPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui ProcessKpiStrip component (from @elabs-ai/components-process) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look ProcessKpiStrip up before writing code: `npx -y @elabs-ai/components-cli docs ProcessKpiStrip` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-process is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Conformance Unavailable
No conformance model has run yet — a genuine "not available" state, not a fabricated 0%.
With Trends
Every tile carries a trend sparkline alongside its headline number (#359: all six, not five — a missing `medianThroughput` series used to leave that one tile with no mark).
Inline
`layout="inline"`: the same six numbers as one dense ribbon, for a workspace whose height belongs to the process map. Cells are divided by hairlines and the ribbon scrolls sideways when it runs out of room.
Conformance From Replay
RM-062: the conformance tile reads a token-replay result directly (its mean fitness) and plots `conformanceRateSeries` as its sparkline.
Loading
No data yet — `loading` reserves every tile's final shape (`MetricGrid`'s own skeleton).
Conformance tile keeps its height when unmeasured
Regression lock (RM-052 round 2, #227, F3): the conformance tile must occupy the SAME box height whether or not a conformance score has actually been measured. Before the fix, `description` was only ever given a value in the "not available" branch, so the measured and unavailable states rendered different heights — the tile visibly reflowed depending on which conformance state a reader happened to see. Renders both states side by side and asserts the conformance tile's own box is pixel-identical between them.
API
ProcessKpiStrip
| Prop | Type | Description |
|---|---|---|
kpisrequired | ProcessKpiStripKpis | |
conformance | number | ConformanceResult | null | `0..1`, a replay result (RM-061's `tokenReplay`, whose `overallFitness` the tile prints — RM-062), or `null`/`undefined` when no conformance model has been fitted. |
trends | Partial<Record<ProcessKpiStripTrendKey, number[]>> | Optional per-tile trend series (oldest -> newest), keyed by KPI. |
conformanceSeries | ConformanceRatePoint[] | Conformance rate over time (`conformanceRateSeries`), plotted as the conformance tile's sparkline — the rate-over-time reading (RM-062). Takes precedence over `trends.conformance`. |
loading | boolean | |
layout | "grid" | "inline" | How the six numbers are laid out. `"grid"` (default) is the card grid a dashboard page opens with. `"inline"` is one dense ribbon — label, value and sparkline per cell, divided by hairlines, scrolling sideways when it runs out of room — for a workspace whose height belongs to the process map, not to its KPIs. Same numbers, same formats, same sparkline text alternatives in both. |