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.
Every number updates the moment it changes.
Questions in, answers out, with sources.
One API across web, mobile and the edge.
Encrypted at rest and in transit, always.
Customize
Usage
import { BentoBars, BentoChat, BentoGrid, BentoOrbit } from "@/components/motionkit/bento-grid";
<BentoGrid
items={[
{ title: "Live analytics", description: "Every number updates as it changes.", visual: <BentoBars />, span: { cols: 2 } },
{ title: "Ask in plain English", description: "Questions in, answers out.", visual: <BentoChat /> },
{ title: "Works everywhere", description: "One API across web, mobile and edge.", visual: <BentoOrbit /> },
{ title: "Private by default", description: "Encrypted at rest and in transit.", span: { cols: 2 }, href: "/security" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Tile rise
Scrolls into view
Inner orbit
Runs on its own
The features section of a SaaS or product landing page: four to seven highlights, each with a small live picture.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/bento-grid. It saves the file to components/motionkit and installs its dependencies.
Bento Grid is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, tiles appear in place, the border light stays off, the chat shows its full answer and the orbits hold still.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Launch Hero
A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.
Scroll Showcase
Scrollytelling for a product tour: steps scroll past while a pinned panel crossfades to each one's visual, with a line that fills as you go.
Every number updates the moment it changes.
Questions in, answers out, with sources.
One API across web, mobile and the edge.
Encrypted at rest and in transit, always.
Customize
Usage
import { BentoBars, BentoChat, BentoGrid, BentoOrbit } from "@/components/motionkit/bento-grid";
<BentoGrid
items={[
{ title: "Live analytics", description: "Every number updates as it changes.", visual: <BentoBars />, span: { cols: 2 } },
{ title: "Ask in plain English", description: "Questions in, answers out.", visual: <BentoChat /> },
{ title: "Works everywhere", description: "One API across web, mobile and edge.", visual: <BentoOrbit /> },
{ title: "Private by default", description: "Encrypted at rest and in transit.", span: { cols: 2 }, href: "/security" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Tile rise
Scrolls into view
Inner orbit
Runs on its own
The live preview is free to explore. Plus unlocks the source for Bento Grid and every other premium component.