docs / patterns / stat-bento

StatBento

a strip of headline numbers, each a big value with its unit in an accent suffix and a short label beneath. a proof strip to sit under a hero or a case study.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

a proof strip on a landing section, under a hero or a CaseStudyHerothree cells reads best. cells take a translucent ink fill, safe inside a Cardnot a dashboard. live metrics with trend and spark are StatCardnever mix cell types. a mixed grid is BentoGrid

a11y

plain text in a grid · icons are decorative and aria-hiddenjest-axe

dependencies

BentoMetric from the same package
live demo · try it out

12M

downloads

180+

contributors

60%

less code
customize
animatecount each value up from zero on mount
usagecopy
import { StatBento } from "@usva-ui/react/patterns/stat-bento";

<StatBento animate
  stats={[
    { value: "12", suffix: "M", label: "downloads" },
    { value: "180", suffix: "+", label: "contributors" },
    { value: "60", suffix: "%", label: "less code" },
  ]}
/>

props

proptypedefaultnotes
statsStatBentoItem[]—the cells: { value, label, suffix?, icon? }. the suffix carries the unit in accent-alt.
animateboolean—counts each numeric value up from zero on mount.
asReact.ElementType"div"the element rendered as the grid. pass RevealGroup to stagger the cells: it animates its direct children, so it must be the grid, not wrap it.

get it

bun add @usva-ui/reactcopy
usagecopy
import { StatBento } from "@usva-ui/react/patterns/stat-bento";

<StatBento
  stats={[
    { value: "40", suffix: "%", label: "faster builds" },
    { value: "2.4", suffix: "k", label: "active users" },
    { value: "99.9", suffix: "%", label: "uptime" },
  ]}
/>