docs / patterns / bento-info

BentoInfo

a label and then whatever the cell has to hold. where BentoText argues and BentoMetric counts, this one just lists: the stack, the role, the dates.

intensity · structuresrsc · client

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the supporting cells of a proof wall: stack, role, timeline, scopechips are the common body, but the slot takes any markupthe label is not optional here. an unlabelled cell is BentoText with no titlenot a table. once the body has rows and columns it wants a real one

a11y

the label is plain text and the icon tile is decorative · a list in the body stays a real listjest-axe
live demo · try it out
Stack
ReactTailwindBase UI
Timeline
Six weeks, two of them research.
customize
labelmono eyebrow above the body
childrenwhatever the cell has to hold
usagecopy
import { BentoInfo } from "@usva-ui/react/patterns/bento-grid";

<BentoInfo label="Stack">
  <Chip>React</Chip>
      <Chip>Tailwind</Chip>
      <Chip>Base UI</Chip>
</BentoInfo>

props

proptypedefaultnotes
labelReactNode—mono uppercase eyebrow above the body. required here, unlike on BentoText.
iconReactNode—tile beside the label, in the alternate accent.
childrenReactNode—the body. chips, a sentence, a short list. it is a slot, not a variant.

get it

bun add @usva-ui/reactcopy
usagecopy
import { BentoInfo } from "@usva-ui/react/patterns/bento-grid";
import { Chip } from "@usva-ui/react/primitives/chip";

<BentoInfo label="Stack">
  <Chip>React</Chip>
  <Chip>Tailwind</Chip>
</BentoInfo>