import { Progress } from "@elabs-ai/components-ui";npm install @elabs-ai/components-tokens @elabs-ai/components-uiPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Progress component (from @elabs-ai/components-ui) 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 Progress up before writing code: `npx -y @elabs-ai/components-cli docs Progress` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ui is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`). 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
Full
Empty
Tones
All four tones (#358). Non-text contrast of the indicator fill against the `bg-muted` track (WCAG 1.4.11, ≥3:1), **measured in a real browser** on this story (`getComputedStyle` → canvas readback, 2026-08-02) rather than derived from the token literals: | tone | light | dark | | ----------- | ----------- | --------- | | default | 4.09:1 | 7.17:1 | | success | 5.19:1 | 9.07:1 | | warning | 4.44:1 | 7.88:1 | | destructive | 4.94:1 | 4.79:1 | All four clear 3:1 in both painted themes. `warning` used to be the hole in this table (1.88:1 in light); it was a token-value gap, not a component one, and #381 fixed it at the token — `--warning` is now a deep amber that clears 3:1 on every content surface. High decoration is deliberately NOT in this table: the decoration dial no longer re-inks controls at all (decoration paints backgrounds and chart fills only), so the indicator fill is the SAME painted token at every decoration level and this measurement holds across the whole dial.
With Marker
A KPI running behind its pace marker (62% done, expected 70% by today) — `markerLabel` composes into `aria-valuetext` alongside the raw value.
With Marker Ahead
Ahead of pace — the same reference tick, further behind the filled value.
Marker All Variants
The pace tick renders on every tone variant, not only `default`.
API
Progress
| Prop | Type | Description |
|---|---|---|
marker | number | Reference point (0–100, same scale as `value`) — e.g. an "expected by today" pace or a target — rendered as a thin vertical tick on the track. Unset (default) renders no tick and leaves the DOM/layout byte-identical to a marker-less `Progress`. |
markerLabel | string | What `marker` represents (already localized by the caller — e.g. `"expected 70% by today"`). When set, it is appended to the progress bar's accessible value text so assistive tech hears the reference point alongside the value; a caller-supplied `aria-valuetext` always wins over this composition. When `marker` is set but `markerLabel` is not, the tick is purely decorative and `aria-valuetext` is left untouched — this component never invents its own English copy (i18n-strings). |