Bento Grid
A flexible grid layout component for creating responsive and adaptive grid layouts.
Powered by
Installation
npx dedevs-ui@latest add bento
Features
- Flexible grid layout with customizable columns and gaps
- Responsive design that adapts to different screen sizes
- Supports spanning items across multiple columns
- Easy to use with a simple API
- Customizable via className prop
Examples
Basic Usage
Custom Gap
Responsive Layout
Props
The BentoGrid component is made up of the following subcomponents:
BentoGrid
The BentoGrid component is the main component that provides the grid layout.
| Prop | Type | Default |
|---|---|---|
items | BentoGridItemProps[] | - |
gap | number | - |
className | string | - |
BentoGridItem
The BentoGridItem component is used to define individual items within the grid.
| Prop | Type | Default |
|---|---|---|
title | string | - |
description | string | - |
icon | ReactNode | - |
status | string | - |
tags | string[] | - |
meta | string | - |
cta | string | - |
colSpan | number | - |
hasPersistentHover | boolean | - |