$99 launch price

Components

Bento Grid

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/bento-grid

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 111 Pro components · lifetime updates.

I have a licenseGet Pro
<BentoGrid
  items={[
    { id: "cove", src: "/photos/cove.webp", title: "A quiet cove", eyebrow: "Travel", description: "...", colSpan: 2, rowSpan: 2 },
    { id: "cliffs", src: "/photos/cliffs.webp", title: "Cliffs at sunset", description: "..." },
    { id: "light", src: "/photos/lighthouse.webp", title: "Lighthouse at dusk", description: "..." },
  ]}
  columns={4}
/>

Use cases

  • Feature grids

    Marketing bento sections where each tile opens into a longer explanation.

  • Case studies

    Portfolio tiles that expand to a hero image plus write-up without a page change.

  • Product galleries

    Shots on the left, specs and copy on the right.

  • Team or press pages

    Headshots or coverage tiles with a bio or quote in the sidebar.