Components
Data display
Delta, proportion bars and tracks — where direction and sentiment part company.
+12.4%-0.5%-6.2%0.0%
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/data.jsonDirection is not sentiment
Delta takes them separately, because they disagree often enough to matter. An
average sales cycle falling from 21 days to 19 is a down arrow with positive
sentiment. Collapsing the two into one prop would force that number to render
red.
neutral sentiment uses bg/subtle rather than green or red, for movement that
is genuinely just movement.
Proportion bars are hatched
The segments carry a diagonal hatch as well as a hue — in Figma that is stroked
vectors at 45°, and in CSS a repeating-linear-gradient at 135deg with a
perpendicular period of about 9.19px. The hatch is what keeps the segments
distinguishable in a screenshot, in greyscale, and to anyone who cannot separate
the hues.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Delta. The figure, already formatted. |
| direction | "up" | "down" | "flat" | "up" | Which way the arrow points. |
| sentiment | "positive" | "negative" | "neutral" | "positive" | Whether that is good news. Independent of direction. |
| segments | BarSegment[] | — | ProportionBar. label, value, color and an optional stripe. |
| percent | number | — | Track. Clamped to 0–100. |