Bento Grid

Features 125

About

All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bento Grid to your project and fits it to your theme.

Code

How Bento Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";

export default function BentoGridDemo() {
  const items = [
    {
      title: "Automated Notifications",
      description: "Receive real-time alerts and updates across all your devices.",
      header: (
        <img
          src="https://cdn.21st.dev/assets/mirror/d0/d0ea6d35461526b32bafd0777b72f3b57c75b9cc53684f9aa0b25dc45e9a3624.jpg"
          alt="Abstract gradient background for notifications"
          className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
        />
      ),
      className: "md:col-span-1",
    },
    {
      title: "Content Management System",
      description: "Easily organize, edit, and publish your documents.",
      header: (
        <img
          src="https://cdn.21st.dev/assets/mirror/63/6309bd202446be4fcb65bee5b78f6a8af1ee4fd3e45f5c5188de033d0f378eee.jpg"
          alt="Person working on a laptop with documents"
          className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
        />
      ),
      className: "md:col-span-2",
    },
    {
      title: "Intelligent Event Scheduling",
      description: "Plan and manage your calendar with smart suggestions.",
      header: (
        <img
          src="https://cdn.21st.dev/assets/mirror/80/80b2bcf4d22f1905998b273ef94b327e0f0b139ef8ee1e45ef2446c065b7c8d1.jpg"
          alt="A calendar with events and plans"
          className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
        />
      ),
      className: "md:col-span-2",
    },
    {
      title: "AI-Powered Insights",
      description: "Leverage artificial intelligence to understand your data.",
      header: (
        <img
          src="https://cdn.21st.dev/assets/mirror/64/64bc44a5cfd75c7504c36f226af58973db4230566ccfcb2961675a36889e73e8.jpg"
          alt="Abstract visualization of an AI neural network"
          className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
        />
      ),
      className: "md:col-span-1",
    },
  ];

  return (
    <div className="w-full p-4">
      <BentoGrid>
        {items.map((item, i) => (
          <BentoGridItem
            key={i}
            title={item.title}
            description={item.description}
            header={item.header}
            className={item.className}
          />
        ))}
      </BentoGrid>
    </div>
  );
}