New

BentoGrid

Magazine-style bento grid layout with varied card sizes, subtle hover scale effects, and gradient accents.

Creative & Uniquebentogridlayoutmagazinecards

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Sparkles, TrendingUp, Zap, Layers, Star, BarChart3 } from "lucide-react";
4
5const items = [
6  { title: "Analytics", desc: "Real-time insights", icon: BarChart3, span: "md:col-span-2 md:row-span-2", gradient: "from-violet-500 to-indigo-600" },
7  { title: "Performance", desc: "Lightning fast", icon: Zap, span: "", gradient: "from-amber-500 to-orange-600" },
8  { title: "Growth", desc: "10x your output", icon: TrendingUp, span: "", gradient: "from-emerald-500 to-teal-600" },
9  { title: "Design System", desc: "Consistent UI", icon: Layers, span: "md:col-span-2", gradient: "from-pink-500 to-rose-600" },
10  { title: "AI Powered", desc: "Smart automation", icon: Sparkles, span: "", gradient: "from-blue-500 to-cyan-600" },
11  { title: "Premium", desc: "Top quality", icon: Star, span: "", gradient: "from-purple-500 to-fuchsia-600" },
12];
13
14export default function BentoGrid() {
15  return (
16    <div className="mx-auto w-full max-w-3xl">
17      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
18        {items.map((item) => (
19          <div
20            key={item.title}
21            className={`group relative overflow-hidden rounded-2xl border border-zinc-200 bg-white p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-zinc-800 dark:bg-zinc-950 ${item.span}`}
22          >
23            <div className={`mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${item.gradient}`}>
24              <item.icon className="h-5 w-5 text-white" />
25            </div>
26            <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">{item.title}</h3>
27            <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{item.desc}</p>
28            <div className={`absolute -bottom-20 -right-20 h-40 w-40 rounded-full bg-gradient-to-br opacity-10 transition-all duration-500 group-hover:opacity-20 ${item.gradient}`} />
29          </div>
30        ))}
31      </div>
32    </div>
33  );
34}