Bento Grid
Bento grid FAQ with masonry expand 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 |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
title | string | Knowledge Base | Section title text. |
titleColor | string | #ffffff | Title text color. |
cardBgColor | string | #262626 | Card background color. |
activeCardBgColor | string | #4f46e5 | Active card background color. |
activeCardTextColor | string | #e0e7ff | Active card text color. |
inactiveCardBgColor | string | #262626 | Inactive card background color. |
inactiveCardTextColor | string | #a3a3a3 | Inactive card text color. |
iconBgColor | string | #171717 | Icon background color. |
iconColor | string | #ffffff | Icon color. |
badgeBgColor | string | rgba(255,255,255,0.1) | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
fillerEmoji | string | 👋 | Filler block emoji. |
fillerTitle | string | More questions? | Filler block title text. |
fillerSubtitle | string | Chat with us | Filler block subtitle text. |
fillerBgColor | string | #262626 | Filler block background color. |
Related Components
When to Use
Perfect for tech sites, modern dashboards, and Next.js applications that adopt a 'Bento Box' grid system. Use this React component for a visually dense FAQ section that uses varying tile sizes to create an interesting masonry-like layout.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your overall layout. Follow React best practices by pairing it with dark-mode themes. Optimize for performance by managed the hover animations for complex grid interactions.
Why This Component Matters in Modern UI Development
Bento grids are a key trend in modern high-end UI design, providing hierarchy and variety in a compact space. This production-ready component helpsคุณ build an interface that feels modular and interactive, adding a layer of structural complexity to your project.
Frequently Asked Questions
QHow does the masonry effect work?
The tiles use different grid column and row spans to create a varied, high-density layout inspired by Apple's product marketing pages.
QAre the tiles interactive?
Yes, each tile responds to clicks by expanding to show the answer, with smooth layout transitions powered by Framer Motion.
QCan I customize the filler block?
The filler block is a specialized area for CTAs or extra info, fully customizable via the provided props like `fillerEmoji` and `fillerTitle`.