Bento Grid

Apple-style bento grid layout with configurable spans and gap sizes.

cardsgridbentolayout

Installation

Terminalbash

npx motion-primitives-website add bento-grid

Usage

bento-grid.tsxtsx

import { BentoGrid, BentoGridItem } from "@/components/cards/bento-grid";

<BentoGrid>
  <BentoGridItem title="Feature" description="Description" />
</BentoGrid>

Props

Prop	Type	Default	Description
children*	ReactNode	—	Grid items
className	string	—	Additional CSS classes

Related Components

Feature Showcase

New

Interactive three-panel bento: sidebar nav switches a live demo center panel and code snippet right panel. Perfect for SaaS feature sections.

Glow Card

Card with animated glow border that follows cursor position.

Hover Card

Card with smooth 3D tilt and scale on hover with spring physics.

Stack Cards

New

Cards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.