Bento Grid

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/feat-bento-grid

Usage

import { BentoGrid } from "@/components/feat-bento-grid";

export default function Page() {
  return (
    <BentoGrid>
      <article data-span="2" className="rounded-xl border border-border p-6">
        <h3>Push to production in under a minute</h3>
        <p>Every commit builds, ships to the edge and can be rolled back.</p>
      </article>
      <article className="rounded-xl border border-border p-6">
        <h3>A URL for every branch</h3>
        <p>Each pull request gets its own isolated preview environment.</p>
      </article>
      <article data-span-row="2" className="rounded-xl border border-border p-6">
        <h3>See every request end to end</h3>
        <p>Traces, logs and metrics linked to the deploy that produced them.</p>
      </article>
    </BentoGrid>
  );
}

Props

Customisation

Bento Grid declares no tokens of its own; it is a layout frame that consumes the global semantic tokens through the Tailwind utilities on its root, and your cell markup owns the card styling. Override the grid from the className prop, for example to change the gap or the column count at a breakpoint, and retheme the cells through the same semantic tokens the rest of the library uses:

<BentoGrid className="gap-6 lg:grid-cols-4">
  {cells}
</BentoGrid>

/* cells styled with semantic tokens */
:root {
  --border: oklch(from var(--color-neutral-50) l c h / 0.16);
}

Frequently asked questions

Is Bento Grid free for commercial use?

Yes. Bento Grid is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does Bento Grid affect performance or accessibility?

The reveal animates transform and opacity only, inside space the grid has already reserved, so layout shift is zero. The entrance starts from whileInView and runs once, the 4px hover lift is limited to fine pointers and never hides content or moves it away from the cursor, and with reduced motion enabled the full grid renders immediately with no reveal and no lift. The grid itself is layout only, with no grid role, so your own cell markup keeps its natural heading structure and focus behaviour.

How do I make a cell span two columns or two rows?

Set data-span="2" on a cell to span two columns, or data-span-row="2" to span two rows. Column spans apply from md, where they read as a full-width band across the two-column grid. Row spans wait until lg, where three columns can absorb them: in a two-column grid a row span holds one column open across two rows, which pushes any wide cell after it onto a new row and can leave a half-width gap that dense flow has nothing narrow enough to fill. Both collapse automatically to the single mobile column.

Related components

• Collaborative Cursors Feature
• Product Feature Tabs
• Guided Product Tour