Bento Grid Card

1npm install lucide-react clsx tailwind-merge

1import { type LucideIcon } from 'lucide-react';
2import { cn } from '@/lib/utils';
3
4interface BentoItem {
5  title: string;
6  description: string;
7  icon: LucideIcon;
8  color: 'yellow' | 'dark' | 'white' | 'green';
9  span: '1x1' | '2x1' | '1x2' | '2x2';
10}
11
12interface BentoGridProps {
13  items: BentoItem[];
14  className?: string;
15  columns?: 3 | 4;
16}
17
18const colorMap: Record<string, string> = {
19  yellow: 'bg-amber-400 text-white',
20  dark: 'bg-neutral-900 text-white',
21  white: 'bg-white text-neutral-900 border border-neutral-200',
22  green: 'bg-emerald-500 text-white',
23};
24
25const spanMap: Record<string, string> = {
26  '1x1': 'col-span-1 row-span-1',
27  '2x1': 'col-span-2 row-span-1',
28  '1x2': 'col-span-1 row-span-2',
29  '2x2': 'col-span-2 row-span-2',
30};
31
32export function BentoGrid({ items, className, columns = 3 }: BentoGridProps) {
33  return (
34    <div
35      className={cn(
36        `grid grid-cols-1 md:grid-cols-${columns} gap-4`,
37        className
38      )}
39    >
40      {items.map((item, i) => {
41        const Icon = item.icon;
42        return (
43          <div
44            key={i}
45            className={cn(
46              'rounded-2xl p-6 flex flex-col gap-3 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg',
47              colorMap[item.color],
48              spanMap[item.span]
49            )}
50          >
51            <div className="flex items-center gap-3">
52              <Icon className="size-6" />
53              <h3 className="font-bold text-lg">{item.title}</h3>
54            </div>
55            <p className="text-sm opacity-80 leading-relaxed">
56              {item.description}
57            </p>
58          </div>
59        );
60      })}
61    </div>
62  );
63}

1import { BentoGrid } from '@/components/ui/bento-grid';
2import { Code2, Palette, Sparkles, Globe, Zap, Shield } from 'lucide-react';
3
4const items = [
5  {
6    title: 'Fast Performance',
7    description: 'Optimized for speed with lazy loading and code splitting.',
8    icon: Zap,
9    color: 'yellow' as const,
10    span: '2x1' as const,
11  },
12  {
13    title: 'Clean Code',
14    description: 'TypeScript-first with strict typing and best practices.',
15    icon: Code2,
16    color: 'dark' as const,
17    span: '1x1' as const,
18  },
19  {
20    title: 'Beautiful UI',
21    description: 'Modern design system with Tailwind CSS.',
22    icon: Palette,
23    color: 'white' as const,
24    span: '1x1' as const,
25  },
26  {
27    title: 'AI-Powered',
28    description: 'Smart features powered by machine learning.',
29    icon: Sparkles,
30    color: 'green' as const,
31    span: '1x1' as const,
32  },
33];
34
35export function FeatureGrid() {
36  return <BentoGrid items={items} columns={3} />;
37}

1┌─────────────────┬─────────────┐
2│   Main Feature  │   Stat 1    │
3│   (2x2)         │   (1x1)     │
4│                 ├─────────────┤
5│                 │   Stat 2    │
6│                 │   (1x1)     │
7├─────────────────┴─────────────┤
8│   Bottom Feature (2x1)        │
9└───────────────────────────────┘

1┌──────────┬──────────┬──────────┬──────────┐
2│ Feature 1│ Feature 2│ Feature 3│ Feature 4│
3│ (1x1)    │ (1x1)    │ (1x1)    │ (1x1)    │
4├──────────┴──────────┼──────────┴──────────┤
5│   Highlight (2x1)   │   Side (2x1)        │
6└─────────────────────┴─────────────────────┘