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 |
Build websites faster and 10x better than your competitors with Aceternity UI Pro
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is an artist, I didn't know what I wanted when we started, but his
intuition and eye for design more than made up for it. We went from "I
want something dark theme and high...
John Ferry
President at TAC, CEO at Rogue