Bento Grid

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

card grid hover features

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.

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