Deploys
Push to production in under a minute
Every commit builds, runs your checks and ships to the edge automatically. Roll back to any previous release with one click, no redeploy needed.
Bento Grid
A free bento grid feature section with staggered reveals and hover lift.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Bento Grid is a free bento grid React component for Next.js feature sections, built with Motion and styled with Tailwind. It lays your cells out on a responsive CSS grid, one column on mobile, two at md and three at lg, and reveals them with a staggered rise the first time the grid scrolls into view.
You bring the cells as ordinary children; the grid wraps each one in a plain container that handles the entrance and a 4px hover lift on fine pointers. A cell can claim two columns with data-span or two rows with data-span-row, and both collapse cleanly to a single column on mobile. The server HTML carries no hidden styles, so crawlers, no-JS visitors and reduced-motion users always see the complete grid immediately.
Previews
A URL for every branch
Each pull request gets its own isolated preview environment, seeded with production-shaped data and torn down on merge.
Observability
See every request end to end
Traces, logs and metrics are captured out of the box and linked to the deploy that produced them. Filter by route, region or release, then jump straight from a slow span to the exact line of code behind it.
Scale
Zero-config autoscaling
Instances scale with concurrent load and settle back to zero when traffic fades, so idle services never bill you.
Security
Secrets that rotate themselves
Credentials are encrypted at rest, injected at runtime and rotated on a schedule you set once.
Collaboration
Review together, ship together
Leave comments directly on preview deployments and resolve them from the pull request, so design and engineering sign off in one place.
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-gridUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Grid cells. A cell may set data-span="2" (two columns) or data-span-row="2" (two rows). |
| className | string | undefined | Additional classes merged onto the grid root. |
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. Spans apply from the md breakpoint up, where the grid has two and then three columns, and collapse automatically to the single mobile column. Dense grid flow fills any gaps the spans create.