docs / patterns / bento-grid

BentoGrid

a wall of cards that reads as one lit surface. mix wide and tall cells so the grid has a focal point, and a shared wash and hover shine sweep across all of them at once.

intensity · structuresrsc · client

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

proof walls and case-study stats: mix spans so the grid has a focal cellBentoMetric, BentoInfo and BentoText work inside any Card, not just a bento cellspan is not a position. the grid is flow-dense, narrow cards backfill ahead of a wide onea wall of identical one-by-one cells is just a grid, not a bento

a11y

the spotlight and edge glow are aria-hidden · BentoText renders a real heading · the shine and count-up respect reduced motionjest-axe

dependencies

Card from the same package
live demo · try it out
Problem

Students could not see their whole degree.

Requirements were spread across four systems, none of which agreed with the others.

2.4k

active users

94%

hit ratio
Stack
ReactTailwindBase UI
customize
columnsgrid track count
3
spancolumns the focal cell spans
2
rowSpanrows the focal cell spans
2
highlightfocal cell edge treatment
animatecount metrics up from zero
usagecopy
import { BentoCard, BentoGrid, BentoInfo, BentoMetric, BentoText } from "@usva-ui/react/patterns/bento-grid";
import { Chip } from "@usva-ui/react/primitives/chip";

<BentoGrid columns={3}>
  <BentoCard span={2} rowSpan={2} highlight="wash">
    <BentoText
      label="Problem"
      title="Students could not see their whole degree."
      body="Requirements were spread across four systems, none of which agreed."
    />
  </BentoCard>
  <BentoCard span={1}>
    <BentoMetric animate value="2.4" suffix="k" label="active users" />
  </BentoCard>
  <BentoCard span={1}>
    <BentoMetric animate value="94" suffix="%" label="hit ratio" />
  </BentoCard>
  <BentoCard span={3}>
    <BentoInfo label="Stack">
      <Chip>React</Chip>
      <Chip>Tailwind</Chip>
      <Chip>Base UI</Chip>
    </BentoInfo>
  </BentoCard>
</BentoGrid>

props

proptypedefaultnotes
columnsnumber—explicit column count. omit for a responsive auto-fit grid.

get it

bun add @usva-ui/reactcopy
usagecopy
import { BentoCard, BentoGrid, BentoMetric } from "@usva-ui/react/patterns/bento-grid";

<BentoGrid columns={3}>
  <BentoCard span={2} rowSpan={2}>...</BentoCard>
  <BentoCard>
    <BentoMetric animate value="94" suffix="%" label="hit ratio" />
  </BentoCard>
</BentoGrid>