Bento Grid
Modern bento grid feature section with interactive hover effects.
Main Features of Bento Grid
How to Use Bento Grid in Next.js
Installation Guide for Bento Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, desc: string, icon: LucideIcon, span?: string, color: string}> | [] | Array of feature items with title, description, icon, optional span, and color. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
badgeText | string | System Architecture | Badge text displayed above title. |
title | string | Built for scale. | Section title text. |
subtitle | string | Designed for speed. | Section subtitle text. |
badgeColor | string | #a78bfa | Badge background color. |
titleColor | string | #ffffff | Title text color. |
cardBgColor | string | #171717 | Card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
cardTitleColor | string | #ffffff | Card title text color. |
cardDescColor | string | #a3a3a3 | Card description text color. |
Related Components
When to Use
Excellent for showcasing multiple feature sets in a high-density, visually interesting way. Use this React component for landing pages that want a modern 'Bento Box' grid layout with interactive hover states and clear hierarchy.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your site's primary gutter. Follow React best practices by pairing it with high-contrast icons. Optimize for performance by using efficient card background colors that ensure readability.
Why This Component Matters in Modern UI Development
Bento grids provide a structured yet dynamic way to present complex information. This production-ready UI component helpsคุณ build an interface that feels modular and professional, improving user engagement through its interactive tile layout.
Frequently Asked Questions
QCan I adjust the tile sizes?
Yes, the `features` array supports an optional `span` property to control how many columns each tile occupies in the grid.
QIs the grid mobile responsive?
Absolutely, the bento grid automatically collapses into a single column on smaller screens to maintain clarity and usability.
QDo the icons support custom SVG?
The component is built to work with Lucide-React icons but can be easily adapted to accept any React SVG component.