Library

Bento Grid

Bento Grid

Asymmetric Apple-style bento box layout with mixed column/row spans. Each cell can contain custom visuals with text overlay at the bottom.

bentogridasymmetriclayout

Installation

bash
# Copy bento-grid.tsx to your project
cp components/ui/bento-grid.tsx your-project/components/ui/bento-grid.tsx

How to use

tsx
import { BentoGrid } from "@/components/ui/bento-grid";
tsx
<BentoGrid
  heading="Everything you need"
  items={[
    { title: "Analytics", description: "Track metrics", colSpan: 2 },
    { title: "Fast", description: "< 100ms" },
    { title: "Secure", description: "SOC2" },
    { title: "Scale", description: "Unlimited", colSpan: 2 },
  ]}
/>

Dependencies

framer-motion

Exports

BentoGrid

File

components/ui/bento-grid.tsx
Preview

Built for the modern web

A powerful platform that adapts to your needs

Analytics Dashboard

Real-time metrics and insights

99ms

Blazing Fast

< 100ms response time

300+

Global CDN

300+ edge locations

Team Collaboration

Built for teams of any size

Made with