Bento Grid

The Bento Grid component provides a highly responsive and visually striking card-based layout inspired by bento boxes. It is perfect for feature showcases, dashboards, and statistics. It is built with native CSS grid and zero external dependencies, making it ultra-lightweight and blazingly fast.

🚀

Feature 1

This card spans two columns on large screens.

⚡️

Feature 2

Standard card.

🛡️

Feature 3

Standard card.

Installation

1. Add the CSS to your global stylesheet:

css
/* Bento Grid */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; width: 100%; margin: 0 auto; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 20rem; } .bento-card:nth-child(4n+1) { grid-column: span 2; } }
.bento-card { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 1.5rem; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; }
.bento-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1); }
.bento-card-background { position: absolute; inset: 0; opacity: 0.05; background: radial-gradient(circle at top right, var(--accent) 0%, transparent 50%); transition: opacity 0.3s ease; pointer-events: none; }
.bento-card:hover .bento-card-background { opacity: 0.15; }
.bento-card-inner { position: relative; z-index: 1; padding: 1.5rem; display: flex; flex-direction: column; height: 100%; }
.bento-card-icon { color: var(--accent); margin-bottom: 1rem; width: 2rem; height: 2rem; }
.bento-card-header { margin-bottom: 1rem; }
.bento-card-title { color: var(--text-primary); font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; }
.bento-card-description { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.bento-card-content { flex-grow: 1; display: flex; align-items: flex-end; }

2. Copy the React component into your project:

tsx
"use client";

import { ReactNode } from "react";

export interface BentoGridProps {
  children: ReactNode;
  className?: string;
}

/**
 * A responsive grid container for bento box layouts.
 */
export const BentoGrid = ({ children, className = "" }: BentoGridProps) => {
  return <div className={`bento-grid ${className}`}>{children}</div>;
};

export interface BentoCardProps {
  children?: ReactNode;
  className?: string;
  title?: string;
  description?: string;
  icon?: ReactNode;
}

/**
 * A high-performance card component tailored for BentoGrid.
 */
export const BentoCard = ({
  children,
  className = "",
  title,
  description,
  icon,
}: BentoCardProps) => {
  return (
    <div className={`bento-card ${className}`}>
      <div className="bento-card-background" />
      <div className="bento-card-inner">
        {icon && <div className="bento-card-icon">{icon}</div>}
        {(title || description) && (
          <div className="bento-card-header">
            {title && <h3 className="bento-card-title">{title}</h3>}
            {description && (
              <p className="bento-card-description">{description}</p>
            )}
          </div>
        )}
        <div className="bento-card-content">{children}</div>
      </div>
    </div>
  );
};

Usage

tsx
import { BentoGrid, BentoCard } from '@/components/ui/bento-grid';

export default function MyComponent() {
  return (
    <BentoGrid>
      <BentoCard
        title="Performance"
        description="Blazing fast execution times."
        icon={<span>⚡️</span>}
      />
      <BentoCard
        title="Security"
        description="Bank-grade encryption standard."
        icon={<span>🔒</span>}
      />
      <BentoCard
        title="Scale"
        description="Built to handle millions of users."
        icon={<span>📈</span>}
      />
    </BentoGrid>
  );
}