Bento Grid
A modern grid layout with animated items, hover effects and border beams
cardgridhoverfeaturesanimated
The Dawn of Innovation
Explore the birth of groundbreaking ideas and inventions.
The Digital Revolution
Dive into the transformative power of technology.
The Art of Design
Discover the beauty of thoughtful and functional design.
The Power of Communication
Understand the impact of effective communication in our lives.
Installation
Install dependencies
npm i framer-motion clsx tailwind-merge lucide-reactAdd util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy the source code
components/aesthe-ui/bento-grid/Bentogrid.tsx
import { cn } from "@/lib/utils";
export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid md:auto-rows-[20rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto",
className
)}
>
{children}
</div>
);
};components/aesthe-ui/bento-grid/Bentogrid-items.tsx
"use client"
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
import { ReactNode } from "react";
import { BorderBeam } from "@/components/ui/border-beam";
export const BentoGridItem = ({
className,
title,
description,
header,
icon,
index,
}: {
className?: string;
title?: string | ReactNode;
description?: string | ReactNode;
header?: ReactNode;
icon?: ReactNode;
index?: number;
}) => {
return (
<motion.div
whileHover={{ scale: 1.02, zIndex: 10 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }}
className={cn(
"row-span-1 rounded-[var(--radius)] group/bento relative overflow-hidden",
"border border-border/50 backdrop-blur-sm",
"dark:bg-[#161717]",
"transition-all duration-300",
className
)}
>
<BorderBeam
size={180}
duration={8}
delay={(index || 0) * 0.5}
colorFrom="#FFFF00"
colorTo="#FFFF00"
/>
<div className="relative h-full p-6 flex flex-col justify-end">
{header}
<div className="transition-all duration-300 group-hover/bento:translate-y-0">
{icon}
<div className="font-bold text-2xl mb-2 mt-2 text-foreground">
{title}
</div>
<div className="text-muted-foreground text-sm">
{description}
</div>
</div>
</div>
</motion.div>
);
};components/ui/border-beam.tsx
You'll need the BorderBeam component. Make sure it's available in your project.
Masonry Style with 3D Tilt
Innovation
Cutting-edge technology for modern solutions
Performance
Lightning fast and optimized for speed
Security
Enterprise-grade protection for your data
Security
Enterprise-grade protection for your data
Security
Enterprise-grade protection for your data
Customization
Grid Layout
Customize the grid layout by modifying the BentoGrid className:
<BentoGrid className="md:grid-cols-4 gap-6">
{/* Your items */}
</BentoGrid>Item Sizing
Control individual item sizes using column spans:
<BentoGridItem
className="md:col-span-2 md:row-span-2"
// ... other props
/>Border Beam Colors
Customize the border beam animation colors:
<BorderBeam
size={180}
duration={8}
delay={0}
colorFrom="#FF6B6B"
colorTo="#4ECDC4"
/>Gradients
Add custom gradient backgrounds:
header={
<div className="absolute inset-0 bg-gradient-to-br from-violet-500 to-fuchsia-600 opacity-60" />
}Props
BentoGrid
| Prop name | Type | Description |
|---|---|---|
| className | string | Additional CSS classes for the grid container |
| children | React.ReactNode | BentoGridItem components to display |
BentoGridItem
| Prop name | Type | Description |
|---|---|---|
| className | string | Additional CSS classes (use md:col-span-2 for larger items) |
| title | string | React.ReactNode | The title text or component |
| description | string | React.ReactNode | The description text or component |
| header | React.ReactNode | Background element (typically a gradient div) |
| icon | React.ReactNode | Icon to display above the title |
| index | number | Used for staggered border beam animations |
BentoCard
| Prop name | Type | Description |
|---|---|---|
| item | BentoItem | Object containing title, description, icon, and gradient |
| index | number | Used for animations and determining card size |
BentoItem Interface
interface BentoItem {
title: string
description: string
icon?: React.ReactNode
className?: string
gradient?: string // Tailwind gradient class
}