Bento Grid
Bento grid stats section with box layout and animations.
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 |
|---|---|---|---|
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
mainStat | {value: number, suffix?: string, label?: string, icon?: LucideIcon, iconColor?: string} | {} | Main stat item with value, optional suffix, label, icon, and iconColor. |
secondaryStats | Array<{value: number, suffix?: string, label?: string, icon?: LucideIcon, iconColor?: string}> | [] | Array of secondary stat items. |
mainCardBgColor | string | #4f46e5 | Main card background color. |
mainCardBlurColor | string | rgba(255,255,255,0.1) | Main card blur effect color. |
mainCardLabelColor | string | #c7d2fe | Main card label text color. |
mainCardValueColor | string | #ffffff | Main card value text color. |
mainCardChartBgColor | string | rgba(0,0,0,0.2) | Main card chart background color. |
mainCardChartBarColor | string | rgba(255,255,255,0.5) | Main card chart bar color. |
secondaryCardBgColor | string | #262626 | Secondary card background color. |
secondaryCardBorderColor | string | rgba(255,255,255,0.05) | Secondary card border color. |
secondaryCardLabelColor | string | #a3a3a3 | Secondary card label text color. |
secondaryCardValueColor | string | #ffffff | Secondary card value text color. |
secondaryCardIconBgColor | string | #404040 | Secondary card icon background color. |
secondaryCardIconColor | string | #818cf8 | Secondary card icon color. |
whiteCardBgColor | string | #ffffff | White card background color. |
whiteCardTextColor | string | #000000 | White card text color. |
whiteCardSubtextColor | string | #525252 | White card subtext color. |
gradientCardBgColor | string | #262626 | Gradient card background color. |
gradientCardTextColor | string | #ffffff | Gradient card text color. |
gradientCardSubtextColor | string | #a3a3a3 | Gradient card subtext color. |
Related Components
When to Use
Excellent for complex products, SaaS dashboards, and Next.js applications that want a high-density, modular information layout. Use this React component for a bento-style stats section with varying card sizes, icons, and integrated chart visuals.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your primary site layout. Follow React best practices by using high-contrast active highlights. Optimize for performance by managed the icon rendering for the secondary cards.
Why This Component Matters in Modern UI Development
Bento grids allow you to showcase both hard numbers and illustrative icons in a unified digital architecture. This production-ready UI component helpsคุณ build an interface that feels structured and modern.
Frequently Asked Questions
QHow does the mosaic work?
It uses a professional CSS grid where cards are sized differently (Bento style) to create a sense of hierarchy among your metrics.
QCan I add more cards?
The layout is optimized for one main feature card and multiple secondary metrics to ensure clear visual focus.
QAre the charts functional?
The component features stylized chart elements to represent data trends visually without the overhead of a full charting library.