Logo

Bento Grid

A skewed grid layout with Title, description and a header component

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 framer-motion clsx tailwind-merge @tabler/icons-react

Add util file

utils/cn.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/ui/bento-grid.tsx

import { cn } from "@/utils/cn";
 
export const BentoGrid = ({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        "grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
        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(
        "row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
        className
      )}
    >
      {header}
      <div className="group-hover/bento:translate-x-2 transition duration-200">
        {icon}
        <div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
          {title}
        </div>
        <div className="font-sans font-normal text-neutral-600 text-xs 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.
avatar

Just code in Vanilla Javascript

Delusional

avatar

Tailwind CSS is cool, you know

Sensible

avatar

I love angular, RSC, and Redux.

Helpless

Sentiment Analysis
Understand the sentiment of your text with AI analysis.
avatar

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 nameTypeDescription
classNamestringThe 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
A product by Aceternity
Building in public at @mannupaaji