Content Blocks
Bento Grid
Bento grid stats section with box layout and animations.
statsbentogridbox
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. |