Falnix UI

Bento Grid

A versatile and aesthetically pleasing grid layout for showcasing features, projects, or blog posts.

LayoutVisual

Component Preview

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 Spirit of Adventure
Embark on exciting journeys and discover new horizons.

Installation

npm install clsx tailwind-merge

Copy the source code below into components/ui/bento-grid.tsx:

1import { cn } from "@falnix/ui";
2

3export const BentoGrid = ({
4  className,
5  children,
6}: {
7  className?: string;
8  children?: React.ReactNode;
9}) => {
10  return (
11    <div
12      className={cn(
13        "grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
14        className
15      )}
16    >
17      {children}
18    </div>
19  );
20};
21

22export const BentoGridItem = ({
23  className,
24  title,
25  description,
26  header,
27  icon,
28}: {
29  className?: string;
30  title?: string | React.ReactNode;
31  description?: string | React.ReactNode;
32  header?: React.ReactNode;
33  icon?: React.ReactNode;
34}) => {
35  return (
36    <div
37      className={cn(
38        "row-span-1 rounded-3xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/10 bg-white border border-transparent justify-between flex flex-col space-y-4",
39        className
40      )}
41    >
42      {header}
43      <div className="group-hover/bento:translate-x-2 transition duration-200">
44        {icon}
45        <div className="font-display font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
46          {title}
47        </div>
48        <div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
49          {description}
50        </div>
51      </div>
52    </div>
53  );
54};