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.
The Pursuit of Knowledge
Join the quest for understanding and enlightenment.
The Joy of Creation
Experience the thrill of bringing ideas to life.
The Spirit of Adventure
Embark on exciting journeys and thrilling discoveries.
Installation
Install dependencies
npm i motion clsx tailwind-merge @tabler/icons-reactAdd util file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy the source code
components/ui/bento-grid.tsx
import { cn } from "@/lib/utils";
export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
className,
)}
>
{children}
</div>
);
};
export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
className={cn(
"group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
className,
)}
>
{header}
<div className="transition duration-200 group-hover/bento:translate-x-2">
{icon}
<div className="mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200">
{title}
</div>
<div className="font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
{description}
</div>
</div>
</div>
);
};Example
Populated with Header and Content
AI Content Generation
Experience the power of AI in generating unique content.
Automated Proofreading
Let AI handle the proofreading of your documents.
Contextual Suggestions
Get AI-powered suggestions based on your writing context.
Just code in Vanilla Javascript
Delusional
Tailwind CSS is cool, you know
Sensible
I love angular, RSC, and Redux.
Helpless
Sentiment Analysis
Understand the sentiment of your text with AI analysis.
There are a lot of cool framerworks out there like React, Angular, Vue, Svelte that can make your life ....
Use PHP.
Text Summarization
Summarize your lengthy documents with AI technology.
2 Column Grid
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.
Props
| Prop name | Type | Description |
|---|---|---|
className | string | The class name of the child component. |
items | {title: string, description: string, header: ReactNode, icon: ReactNode} | items that you can map through, passed as props to the BentoGridItem component |
Get beautiful, hand-crafted templates and components with Aceternity UI Pro
Professional, beautiful and elegant templates for your business. Get the best component packs and templates with Aceternity UI Pro.
Manu was quick to respond, very professional, and delivered a website within a week. Very good job. Looking forward to collaborating again
Asriel Han
Founder, CTO at Advex AI