Bento Grid Features

Everything you need to build amazing products

Powerful features and tools designed for modern development teams.

Developer Tools

Built-in DevTools offer insights, transparency, and easy management of your app's performance and configurations.

Beautiful Design

Create stunning interfaces with our comprehensive design system and component library.

Lightning Fast

Optimized performance with edge computing and global CDN distribution.

Global Infrastructure

Deploy to 150+ edge locations worldwide for optimal performance everywhere.

Enterprise Security

Bank-level encryption, SOC 2 compliance, and advanced security features to protect your data.

Analytics Dashboard

Real-time insights with customizable dashboards and detailed reporting.

Features

✅ Asymmetric layout - Modern bento grid design
✅ Flexible sizing - Span columns, rows, or both
✅ Icon support - Lucide icons with colored backgrounds
✅ Visual elements - Add custom React components as visuals
✅ Hover effects - Smooth transitions and border animations
✅ Clean design - Pure black background with zinc accents
✅ Responsive - Adapts from 1 to 3 columns
✅ TypeScript support - Full type safety
✅ Customizable - Easy to style and extend

Installation

Copy and paste the following code into your project.

import { LucideIcon } from "lucide-react";
import { ReactNode } from "react";
 
interface BentoFeature {
  title: string;
  description: string;
  icon?: LucideIcon;
  span?: "col" | "row" | "both";
  visual?: ReactNode;
  className?: string;
}
 
interface FeatureBentoGridProps {
  headline: string;
  description?: string;
  features: BentoFeature[];
}
 
export function FeatureBentoGrid({
  headline,
  description,
  features,
}: FeatureBentoGridProps) {
  const getSpanClass = (span?: "col" | "row" | "both") => {
    switch (span) {
      case "col":
        return "md:col-span-2";
      case "row":
        return "md:row-span-2";
      case "both":
        return "md:col-span-2 md:row-span-2";
      default:
        return "";
    }
  };
 
  return (
    <section className="w-full bg-black py-12 sm:py-16 lg:py-20">
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-3xl space-y-4 text-center">
          <h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl">
            {headline}
          </h2>
          {description && (
            <p className="text-lg text-zinc-400 md:text-xl">{description}</p>
          )}
        </div>
 
        <div className="mx-auto mt-12 grid max-w-6xl gap-4 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => {
            const Icon = feature.icon;
 
            return (
              <div
                key={index}
                className={`group relative overflow-hidden rounded-2xl border border-zinc-800/50 bg-zinc-950 p-8 transition-all hover:border-zinc-700 ${getSpanClass(
                  feature.span,
                )} ${feature.className || ""}`}
              >
                <div className="relative">
                  {Icon && (
                    <div className="mb-6 flex items-center gap-3">
                      <div className="rounded-lg bg-blue-500/10 p-2">
                        <Icon className="h-5 w-5 text-blue-400" />
                      </div>
                      <div>
                        <h3 className="text-xl font-semibold text-white">
                          {feature.title}
                        </h3>
                      </div>
                    </div>
                  )}
                  {!Icon && (
                    <h3 className="mb-4 text-xl font-semibold text-white">
                      {feature.title}
                    </h3>
                  )}
                  <p className="text-sm leading-relaxed text-zinc-500">
                    {feature.description}
                  </p>
                </div>
 
                {feature.visual && (
                  <div className="relative mt-6">{feature.visual}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Usage

Basic Usage

import FeatureBentoGrid from "@/components/ui/feature-bento-grid";
import { Zap, Shield, Users } from "lucide-react";
 
export default function Page() {
    return (
        <FeatureBentoGrid
            headline="Powerful Features"
            description="Everything you need in one place."
            features={[
                {
                    title: "Lightning Fast",
                    description: "Blazing fast performance with edge computing.",
                    icon: Zap,
                },
                {
                    title: "Secure",
                    description: "Enterprise-grade security and compliance.",
                    icon: Shield,
                },
                {
                    title: "Collaborative",
                    description: "Work together seamlessly in real-time.",
                    icon: Users,
                },
            ]}
        />
    );
}

With Spanning

<FeatureBentoGrid
    headline="Everything you need"
    features={[
        {
            title: "Feature 1",
            description: "Spans 2 columns",
            icon: Zap,
            span: "col", // Spans 2 columns
        },
        {
            title: "Feature 2",
            description: "Spans 2 rows",
            icon: Shield,
            span: "row", // Spans 2 rows
        },
        {
            title: "Feature 3",
            description: "Spans 2 columns and 2 rows",
            icon: Users,
            span: "both", // Spans both
        },
        {
            title: "Feature 4",
            description: "Normal size",
            icon: Lock,
        },
    ]}
/>

With Visual Elements

<FeatureBentoGrid
    headline="Visual Features"
    features={[
        {
            title: "Dashboard",
            description: "Beautiful analytics dashboard.",
            icon: BarChart,
            span: "col",
            visual: (
                <div className="flex h-24 items-end gap-2">
                    {[40, 70, 45, 80, 55, 90].map((height, i) => (
                        <div
                            key={i}
                            className="w-full rounded-t bg-gradient-to-t from-blue-500 to-blue-400"
                            style={{ height: `${height}%` }}
                        />
                    ))}
                </div>
            ),
        },
        {
            title: "Security",
            description: "Enterprise-grade protection.",
            icon: Shield,
            visual: (
                <div className="flex items-center justify-center py-8">
                    <div className="flex h-24 w-24 items-center justify-center rounded-full border-4 border-blue-500/20 bg-blue-500/10">
                        <Shield className="h-12 w-12 text-blue-500" />
                    </div>
                </div>
            ),
        },
    ]}
/>

Props

Prop	Type	Default	Description
`headline`	`string`	Required	Section headline
`description`	`string`	`undefined`	Optional description
`features`	`BentoFeature[]`	Required	Array of features

TypeScript Interface

interface FeatureBentoGridProps {
    headline: string;
    description?: string;
    features: BentoFeature[];
}
 
interface BentoFeature {
    title: string;
    description: string;
    icon?: LucideIcon;
    visual?: ReactNode;
    span?: "col" | "row" | "both";
    className?: string;
}

Span Options

Control how features span across the grid:

span: "col" - Spans 2 columns (wider)
span: "row" - Spans 2 rows (taller)
span: "both" - Spans 2 columns and 2 rows (large)
No span - Normal 1x1 size

Grid Behavior

Mobile: Single column layout
Tablet (md): 2 columns
Desktop (lg): 3 columns

Spanning only applies on medium screens and above.

Use Cases

Perfect for:

Feature showcases
Product highlights
Service offerings
Capability overviews
Platform features
Tool collections
Benefit displays
Portfolio items