docs / patterns / bento-metric
BentoMetric
a number given room to be the point of its cell. the label pins to the bottom so a row of them lines up, and the note carries the caveat the figure on its own would hide.
intensity · structuresrsc · client
provenance
shaped from personal-websitelayer
core / patternsintensity
structures · organizes a region, stays out of the contentcomposition
proof walls and stat rows, where the figures have to scan as a setworks inside any Card, not only a bento cellthe count-up is for a first impression. do not animate a number that changes while it is readnot a chart. one figure per cell, and the note is a line, not a paragrapha11y
the value is real text, so it is read as written · the count-up respects reduced motion and lands on the target immediatelyjest-axelive demo · try it out
2.4k
12
since january
customize
valuethe stat itself
suffixunit after the number
labelthe pill beneath
noteaside under the value
sizeweight of the value
animatecount up from zero on mount
usage
import { BentoMetric } from "@usva-ui/react/patterns/bento-grid";
<BentoMetric animate value="2.4" suffix="k" label="active users" />props
| prop | type | default | notes |
|---|---|---|---|
| value | ReactNode | — | the stat itself. a number counts up when animate is set, anything else renders verbatim. |
| label | ReactNode | — | the pill under the value. it pins to the bottom of the cell, so a row of metrics lines up. |
| suffix | ReactNode | — | trailing unit, keyed to the alternate accent so the number keeps the weight. |
| note | ReactNode | — | an aside under the value. the caveat, the comparison, the part the number alone would hide. |
| icon | ReactNode | — | sits inside the label pill, ahead of the text. |
| size | "md" | "lg" | "md" | lg is the standalone stat treatment: display weight and full-strength ink. |
| animate | boolean | false | count up from zero on mount. ignored for a non-numeric value, and skipped under reduced motion. |
get it
bun add @usva-ui/reactusage
import { BentoMetric } from "@usva-ui/react/patterns/bento-grid";
<BentoMetric
animate
value="41"
label="repositories"
note="9 of them abandoned"
/>