Bento Grid

A modern, animated React component that displays content in a bento-style grid of cards with parallax pointer motion and full customization. Perfect for dashboards, feature highlights, marketing, and beautiful layouts.
Inspired by modern bento grid layouts in leading UIs.

Live Preview

Installation

You can install the BentoGrid component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/bento-grid.json

Import

To use the BentoGrid component, import it in your code:

typescript-icon
1import BentoGrid from '@/components/BentoGrid';

Props

The BentoGrid component does not accept any props. All grid items and their layout are defined directly inside the component source itself; you can edit or replace the gridItems array in the component file to customize content or layout.

PropTypeDefaultDescriptionRequired
———All bento items and layout are defined in the gridItems array (see source).—

gridItems (edit in source to customize)

typescript-icon
1const gridItems = [
2  {
3    className: "...", // Tailwind, span, and responsive classes
4    heading: "Heading text...",
5    desc: "Description for this grid cell.",
6  },
7  // ...add or change items!
8];

Example usage

Basic usage (default grid)

typescript-icon
1<BentoGrid />

Customizing items

To create your own items or layout, just amend or replace the gridItems array in your BentoGrid source file.

hr className="border-0 border-t border-dotted border-neutral-200 dark:border-neutral-800 my-6" />

Features

  • Pointer-following parallax animation — Each card smoothly moves relative to pointer position using spring easing from motion.dev.
  • Fully customizable — Card content, column/row span, and styling via each grid item's className.
  • Modern bento appearance — Mix rectangular and square grid items for elegant, engaging, adaptable layouts.
  • Dark mode ready — Utility classes use Tailwind’s dark: variants for instant adaptation.
  • Simple usage — Just drop <BentoGrid /> anywhere, with no props required.

Customization

  • Grid structure: Edit grid-cols-3/grid-rows-2 on the root grid for more or fewer cells.
  • Cell animations: Adjust MAX_OFFSET, spring stiffness, or damping for a more/less lively effect.
  • Content: Each gridItems entry can have any React node—swap titles, rich content, actions, or even nested layouts.
  • Styling: Edit Tailwind classes for different backgrounds, borders, spacing, or effects.

Troubleshooting

  • If card motion doesn’t work, ensure you have motion.dev installed and properly imported.
  • To expand or reduce cards, make sure your grid structure and .col-span/.row-span classes match.
  • Edit or add to gridItems in the source code as needed to change displayed content and layout.