Halloween only 🎃 Get 
Split-Flap Display
A ceramic and graphite split-flap device that ripples each flap into your message.
Bento Grid Layout
ProA responsive bento grid of dashboard tiles where clicking one moves it to the front and the rest glide into place.
show offbentoboxgridframer motion
Overview
Bento Grid Layout is a React and Tailwind CSS bento box grid for dashboards and feature sections, in Next.js or any React app, animated with Framer Motion. CSS Grid handles the responsive layout, and clicking a tile moves it to the first slot with a focus ring while layout animations glide the rest around it, each keeping its own size. Tiles take sizes and optional accents, assemble with a short stagger on mount, and are real buttons that report their pressed state. Turn off expandable for a static grid. Reduced motion drops the glide and stagger but keeps the fades.
Installation
Run the following command
~/your-project
pnpm dlx wensity@latest add bento-box-grid
~/your-project
npx wensity@latest add bento-box-grid
~/your-project
yarn dlx wensity@latest add bento-box-grid
~/your-project
bunx wensity@latest add bento-box-grid
Usage
Import BentoBoxGrid from @/components/wensity/bento-box-grid and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.
app/example.tsx
import {BentoBoxGrid,type BentoTile,} from "@/components/wensity/bento-box-grid";const tiles: BentoTile[] = [{ id: "hero", size: "lg", accent: "chili", title: "Ship faster.", description: "Premium SaaS components." },{ id: "metric", size: "sm", title: "MRR", description: "$184k · +12% MoM" },{ id: "users", size: "md", accent: "graphite", title: "12,481 active",description: "across 47 workspaces" },{ id: "wide", size: "wide", accent: "sky", title: "Latency map", description: "Singapore · Frankfurt · Iowa" },{ id: "tall", size: "tall", accent: "amber", title: "Top route", description: "/dashboard" },];export default function Example() {return <BentoBoxGrid tiles={tiles} />;}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tiles | BentoTile[] | - | Responsive dashboard tiles with size and optional accent. |
expandable | boolean | true | Allow clicking a tile to move it to the first slot with a focus ring. |
gap | number | 14 | Gap between tiles in pixels. |
Related components
Interactive 3D Globe
A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.
Animated Code Diff Viewer
Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.
Animated Terminal
A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.
Featured in React feature section components.