Something new is coming.Join the waitlist

Bento Grid

PreviousNext

React bento grid primitive with span-aware cards, background layers, and a subtle hover lift. Drop-in for landing pages, feature sections, and product overviews. shadcn/ui compatible.

AI-generated summaries

Long threads collapse into a two-sentence digest, with citations back to the original messages.

Smart notifications

Only ping you when something actually needs your attention.

Calendar at a glance

See your day, your team, and your deadlines all on one surface.

Search across everything

Docs, threads, tickets, and calendar entries — one search box, one ranked result list.

Installation

npx shadcn@latest add https://tentui.com/r/bento-grid.json

Usage

BentoGrid is a 3-column responsive CSS grid. Use BentoCard for each tile and choose colSpan / rowSpan to break the rhythm.

import {
  BentoCard,
  BentoCardDescription,
  BentoCardTitle,
  BentoGrid
} from "@/components/bento-grid";
 
export function Features() {
  return (
    <BentoGrid>
      <BentoCard colSpan={2}>
        <BentoCardTitle>Featured</BentoCardTitle>
        <BentoCardDescription>
          A taller, wider tile to anchor the layout.
        </BentoCardDescription>
      </BentoCard>
      <BentoCard>
        <BentoCardTitle>Compact</BentoCardTitle>
        <BentoCardDescription>One cell, one idea.</BentoCardDescription>
      </BentoCard>
    </BentoGrid>
  );
}

The grid is mobile-first — every card stacks to a single column below md. The 3-column / 2-row span options match the canonical bento rhythm without locking you into a fixed template.

Patterns

Background layers

Pass any node to background and it renders behind the content, with a slow scale on hover. Gradients, images, or even animated SVGs all work.

<BentoCard
  background={
    <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,hsl(217_91%_60%/.4),transparent_60%)]" />
  }
>
  <BentoCardTitle>Gradient backdrop</BentoCardTitle>
</BentoCard>

Asymmetric layouts

Combine colSpan and rowSpan to break the grid out of a uniform 3×N rhythm. The classic bento layout pairs a colSpan={2} row with two single-column tiles below.

<BentoGrid>
  <BentoCard colSpan={2} rowSpan={2}>{hero}</BentoCard>
  <BentoCard>{detailA}</BentoCard>
  <BentoCard>{detailB}</BentoCard>
</BentoGrid>

Props

<BentoGrid />

PropTypeDefaultDescription
classNamestring—Forwarded to the outer grid <div>.

<BentoCard />

PropTypeDefaultDescription
backgroundReactNode—Rendered behind the content. Common for gradients or imagery.
colSpan1 | 2 | 31Columns the card occupies on md and above.
rowSpan1 | 21Rows the card occupies on md and above.
classNamestring—Forwarded to the card wrapper.

BentoCardTitle and BentoCardDescription are styled <h3> and <p> elements — drop them into the content area or replace with your own typography.