Bento Grid
A Vercel-style bento where every tile is alive: pinging globe, typing deploy log, drawing chart.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Five tiles with their own micro-animations and a shared cursor spotlight. Replace the copy, keep the motion.
Installation
$ npx shadcn@latest add https://guetix.com/r/bento-grid.json
Uses the shadcn CLI. It creates components/guetix/bento-grid.tsx and installs nothing else.
Usage
example.tsx
import { BentoGrid } from "@/components/guetix/bento-grid";
export default function Example() {
return <BentoGrid />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / subtitle | string | — | Heading. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |