Magic Bento
NewPro
A bento grid of feature cards with a spotlight that follows the pointer and borders that glow as it passes.
Move the pointer across the grid, or tab through the cards.
Customize
#ff784f
300px
Particles
Installation
Magic Bento is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy magic-bento.tsx into components/ui and run npm install motion.
Usage
import { MagicBento } from "@/components/ui/magic-bento";
<MagicBento
items={[
{ title: "Cloud saves", description: "Progress on every device.", span: "2x2", href: "/features/saves" },
{ title: "Leaderboards", description: "Daily and weekly.", href: "/features/boards" },
]}
/>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { title, description?, eyebrow?, icon?, content?, span?, href?, onClick? }[] | — | Cards. span is "1x1", "2x1", "1x2" or "2x2". href makes a link, onClick a button. |
| columns | number | 4 | Columns on wide containers. Narrow containers fall back to two, then one. |
| rowHeight | number | 160 | Minimum row height in pixels. |
| gap | number | 12 | Space between cards in pixels. |
| glowColor | string | "#ff784f" | Color of the spotlight, border glow, particles and ripple. |
| spotlightRadius | number | 300 | Size of the light that follows the pointer, in pixels. |
| particles | boolean | true | Tiny particles drift up from the hovered or focused card. Off with reduced motion. |
| ripple | boolean | true | Ripple from the click point, or from the center for keyboard clicks. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion