Bento Grid

Installation

npx shadcn@latest add @blank/bento-grid

Usage

import {
  BentoCard,
  BentoCardContent,
  BentoCardDescription,
  BentoCardTitle,
  BentoCardVisual,
  BentoGrid,
  BentoLight,
  BentoPanel,
} from "@/components/ui/bento-grid"

<BentoGrid>
  <BentoCard>
    <BentoLight />
    <BentoCardVisual>{/* a bento visual or any fragment */}</BentoCardVisual>
    <BentoCardContent>
      <BentoCardTitle>Deploy with confidence</BentoCardTitle>
      <BentoCardDescription>Every pull request runs the same checks.</BentoCardDescription>
    </BentoCardContent>
  </BentoCard>
</BentoGrid>

The grid has six columns from md up and one below. A card spans two columns by default, so three fill a row; use md:col-span-3 for halves, md:col-span-4 for a wide card and md:row-span-2 for a tall one. Rows are at least 24rem.

BentoCardVisual is the stage. It fills the space the copy leaves and fades its last 4rem into the surface, so a fragment can run off the bottom or the sides instead of sitting in a box. Put BentoCardContent before the visual to set the copy on top.

BentoLight is light falling in from the top edge: a soft haze, a faint dot field and a lit line, brighter while the card is hovered. In light mode it reads as a grey haze on a white card. Set --bento-light on the card to tint it with a role; the bento visuals read the same variable for their accent, so the light and the picture agree. Move the light with left-* and right-*.

<BentoCard className="md:col-span-3 [--bento-light:var(--warning-primary)]">
  <BentoLight className="-right-1/3 left-1/3" />

BentoPanel is the raised surface a fragment sits on — a window, a toast, a palette. It is a step lighter than the card in dark mode and a soft lift in light mode, with the same lit top edge, so fragments from different visuals look like they belong to one system.

Parts react to the card's hover through the group/bento-card group, so a visual can answer with group-hover/bento-card:* classes.