Compare cell
componentA stat cell for comparison tables: the value with a thin bar, colored by its `rank` (best = ok/green, worst = bad/red, mid = neutral).
Install
npx shadcn@latest add @engram/compare-cellRegistry item: /r/compare-cell.json — the machine-readable definition agents install from.
Example
84
62
30
55
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | — |
max | number | 100 | Bar maximum (the stat's ceiling). Default 100. |
rank | CompareRank | "mid" | Standing among the compared rows — colors the value + bar. |
barless | boolean | false | Hide the bar and show just the colored number. |
Composition
pulled in on install- compare-cellcomponent
- segmented-baratom
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.