Anatomy

The section wraps a centred header (optional badge, h2 title, subtitle) and a CSS Grid container. Each BentoItem has an id, title, description, a type flag ('text' or 'visual'), an optional Tailwind span class (e.g. 'col-span-2'), and an optional Lucide icon name. Visual-type cards render the icon at 64px with 20% opacity as a decorative background before the text block. Text-type cards render just the title and description aligned to the bottom of the card.

How it works

Every card is a motion.div with initial={{ opacity: 0, y: 24 }} and whileInView={{ opacity: 1, y: 0 }}. The viewport option { once: true, margin: '-40px' } triggers the animation 40px before the card fully enters the screen, preventing a jarring pop-in. A delay of i * 0.1 seconds staggers the cards sequentially without any orchestration overhead. The icon lookup uses a dynamic key into the Lucide namespace (LucideIcons[name]) so any of the 1,400+ icons can be referenced by string from the data layer.

How to build it in React

1. Define the BentoItem interface and grid container

   Create a BentoItem type with id, title, description, type ('text' | 'visual'), an optional span string, and an optional icon name. Render a CSS Grid with 3 columns on medium screens and auto rows of 180px. The span prop maps directly to a Tailwind class on each card.

   // types
   interface BentoItem {
     id: string;
     title: string;
     description: string;
     type: "text" | "visual";
     span?: string;   // e.g. "col-span-2 row-span-2"
     icon?: string;   // Lucide icon name
   }
   
   // grid container
   <div className="grid grid-cols-1 md:grid-cols-3 auto-rows-[180px] gap-5">
     {items.map((item, i) => (
       <BentoCard key={item.id} item={item} index={i} />
     ))}
   </div>

2. Resolve Lucide icons by string key

   Import the entire Lucide namespace and look up the icon component by name at render time. This keeps the data layer free of React imports and allows icons to be driven from a CMS or JSON file.

   import * as LucideIcons from "lucide-react";
   
   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] || null;
   }
   
   // inside the card
   const Icon = getIcon(item.icon);
   {Icon && <Icon className="h-16 w-16" style={{ color: "var(--color-foreground)" }} />}

3. Add staggered scroll reveals with Framer Motion

   Wrap each card in a motion.div. Set the delay to i * 0.1 so cards cascade left to right. The margin: '-40px' on viewport ensures the animation starts slightly before the card is fully on screen, giving a flowing feel rather than an abrupt pop.

   <motion.div
     initial={{ opacity: 0, y: 24 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-40px" }}
     transition={{ delay: i * 0.1, duration: 0.5 }}
     className={`rounded-2xl border p-6 flex flex-col justify-end ${item.span || "col-span-1"}`}
   >

4. Use CSS tokens for theming

   Apply colors exclusively through CSS custom properties so the grid respects any theme preset without code changes. Visual cards use --color-background-alt for a subtle tint; text cards use --color-background-card. The badge and borders follow --color-accent and --color-border.

   // visual card
   style={{
     backgroundColor: "var(--color-background-alt, var(--color-background-card))",
     borderColor: "var(--color-border)",
   }}
   
   // text card
   style={{
     backgroundColor: "var(--color-background-card)",
     borderColor: "var(--color-border)",
   }}

When to use it

Reach for this grid when you need to present 3-6 features with varying visual weight, some need a long description, others just a title and a graphic hint. It works well as a 'What we do' block for agencies, a 'Key capabilities' section for SaaS, or a highlights reel in a portfolio. Avoid it when all items are equal in importance (use a uniform card grid instead) and when cards carry interactive controls that need consistent sizing.

Used by

• Linear, Uses asymmetric feature grids with mixed card sizes to showcase product capabilities across its marketing pages.
• Vercel, Deploys bento-style editorial blocks to surface infrastructure features with varied text and visual card densities.
• Stripe, Combines icon-accented visual cards with full-text cards in product feature sections to balance scan-ability with depth.
• Loom, Uses mixed-span feature grids on its homepage to give key differentiators more visual real estate than supporting points.

FAQ