Bento Documentation

The Bento module provides a bento-like grid for displaying related content. It provides a unique look not apparent in other forms of grid layouts.

Features

• 🎨 Pixel-perfect Grid Layouts: Crafted by design experts for flawless visual appeal.
• ✨ Styled with the Bento Design Style: Consistent and aesthetically pleasing.
• 🎛️ Customizable Styles: Easily modify with class names to suit your needs.
• 📱 Mobile Responsive: Adapts beautifully to any screen size.

What's Included

< BentoGrid />

The BentoGrid is the main component of the Bento module. It renders a grid layout with a bento styling.

BentoGrid Usage

type GridItem = {
  element: ReactNode;
  height: number;
  width: number;
};
 
const items: GridItems[] = [
  {
    element: <div>Item 1</div>,
    height: 1,
    width: 1,
  },
  {
    element: <div>Item 2</div>,
    height: 1,
    width: 2,
  },
  {
    element: <div>Item 3</div>,
    height: 1,
    width: 3,
  },
];
 
<BentoGrid items={items} gridCols={3} />;

BentoGrid Props