# Bento Grid

> A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.

Category: Sections · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/bento-grid

## When to use it

The features section of a SaaS or product landing page: four to seven highlights, each with a small live picture.

## How it works

Tiles are placed on a three-column CSS grid, and each can span columns and rows. They rise in with a stagger as the grid scrolls into view. One pointer listener on the grid writes the cursor position, relative to each tile, into CSS variables, and every tile paints a radial gradient there behind a 1px gap, so a single light sweeps across all the borders without React re-rendering. The built-in visuals animate when they come into view: bars grow in a wave, a chat answer types itself word by word, and labels orbit on two counter-rotating rings while staying upright.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/bento-grid` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `BentoItem[]` |  | Each tile's title, description, icon, visual, span and optional link. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the border light and the built-in visuals. |
| `BentoBars / BentoChat / BentoOrbit` | `components` |  | Ready-made live visuals to put in a tile. |

## Accessibility

- **Keyboard: Pass.** Tiles with a link are single links with visible focus rings; their "Learn more" also shows on focus.
- **Screen readers: Pass.** Each tile reads as its title and description. Visuals, glows and the border light are decorative and hidden.
- **Reduced motion: Pass.** With reduced motion on, tiles appear in place, the border light stays off, the chat shows its full answer and the orbits hold still.
- **Colour contrast: Pass.** Titles measure 16.1:1 and descriptions 7.3:1 on the tile.