components
Bento Grid
A responsive bento layout with polished cards.
title: Bento Grid description: A beautiful bento grid component with tabs
Bento Grid
A modern bento grid layout component with hover effects and responsive design.
Analytics Dashboardv2.4.1
Real-time metrics with AI-powered insights and predictive analytics
Task Manager84 completed
Automated workflow management with priority scheduling
Media Library12GB used
Cloud storage with intelligent content processing
Global Network6 regions
Multi-region deployment with edge computing
import BentoGrid from '@/components/bento-grid';
export default function MyComponent() {
return <BentoGrid />;
}Usage
Basic Usage
```tsx import BentoGrid from '@/components/bento-grid';
Analytics Dashboardv2.4.1
Real-time metrics with AI-powered insights and predictive analytics
Task Manager84 completed
Automated workflow management with priority scheduling
Media Library12GB used
Cloud storage with intelligent content processing
Global Network6 regions
Multi-region deployment with edge computing
```
With Custom Items
Analytics Dashboardv2.4.1
Real-time metrics with AI-powered insights and predictive analytics
Task Manager84 completed
Automated workflow management with priority scheduling
Media Library12GB used
Cloud storage with intelligent content processing
Global Network6 regions
Multi-region deployment with edge computing
import BentoGrid from '@/components/bento-grid';
import { CheckCircle, TrendingUp } from 'lucide-react';
const customItems = [
{
title: "Analytics Dashboard",
meta: "v2.4.1",
description: "Real-time metrics with AI-powered insights",
icon: <TrendingUp className="w-4 h-4 text-blue-500" />,
status: "Live",
tags: ["Statistics", "Reports"],
colSpan: 2,
},
{
title: "Task Manager",
meta: "84 completed",
description: "Automated workflow management",
icon: <CheckCircle className="w-4 h-4 text-emerald-500" />,
status: "Updated",
tags: ["Productivity"],
},
];
<BentoGrid items={customItems} />Installation
```bash npm install lucide-react ```
Props
| Prop | Type | Default | Description | | --------- | --------------- | ------------ | ------------------------- | | `items` | `BentoItem[]` | Sample items | Array of bento grid items |
Component Code
"use client";
import { cn } from "@/lib/utils";
import { CheckCircle, TrendingUp, Video, Globe } from "lucide-react";
interface BentoItem {
title: string;
description: string;
icon: React.ReactNode;
status?: string;
tags?: string[];
meta?: string;
cta?: string;
colSpan?: number;
hasPersistentHover?: boolean;
}
interface BentoGridProps {
items: BentoItem[];
}
const itemsSample: BentoItem[] = [
// ... your items
];
export default function BentoGrid({ items = itemsSample }: BentoGridProps) {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-7xl mx-auto">
{items.map((item, index) => (
<div key={index} className={cn(/* ... */)}>
{/* ... */}
</div>
))}
</div>
);
}export interface BentoItem {
title: string;
description: string;
icon: React.ReactNode;
status?: string;
tags?: string[];
meta?: string;
cta?: string;
colSpan?: number;
hasPersistentHover?: boolean;
}
export interface BentoGridProps {
items?: BentoItem[];
}