Glass Bento Grid

Cards

About

Web3 Glowing Bento Grid

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

Code

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

Usage.tsx

// app/page.tsx or your component file
"use client";

import { GlassBentoGrid, BentoItem } from "glass-bento-grid";
import { 
  AnimatedIconContainer, 
  EthereumIcon, 
  BitcoinIcon,
  NftIcon 
} from "glass-bento-grid";

// Optional: Create your own custom items
const myItems: BentoItem[] = [
  {
    title: "Custom Dashboard",
    meta: "v1.0",
    description: "Your custom dashboard description",
    icon: <AnimatedIconContainer delay={0}><EthereumIcon className="w-5 h-5 text-white" /></AnimatedIconContainer>,
    status: "New",
    tags: ["Custom", "Tag"],
    colSpan: 2,
    progress: 85,
    glowColor: "rgba(var(--gradient-1), 0.5)",
  },
  // Add more items...
];

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-[rgb(var(--bento-bg))]">
      {/* Use with default items */}
      <GlassBentoGrid />
      
      {/* Or use with custom items */}
      {/* <GlassBentoGrid items={myItems} className="max-w-6xl" /> */}
    </main>
  );
}