Insights
Analytics
Track every signal in real time and spot trends before they become problems.
Browse components
Magic Bento
Bento grid whose cards light up with a cursor-following border glow, tilt gently and fill with drifting particles on hover.
Installation
npx shadcn@latest add @glint-ui/magic-bentoFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/magic-bento.json
Usage
import { MagicBento } from "@/components/ui/magic-bento";
<MagicBento glowColor="#a78bfa" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, title, description, icon? }. Six items fill the grid. |
| glowColor | string | "#a78bfa" | Glow, spotlight and particle color. |
| spotlightRadius | number | 320 | Px radius of the cursor spotlight. |
| tilt | number | 6 | Max card tilt in degrees (0 disables). |
| particles | boolean | true | Floating particles inside the hovered card. |
| particleCount | number | 10 | Particles per card. |
| className | string | — | Extra classes for the root element. |