Growing
18,420
$12,450
Jan
$11,200
Feb
$14,800
Mar
$13,950
Apr
$16,300
May
$18,420
Jun
Last 6 months
Monthly Revenue
12% increasefrom previous month
Active Users
847 online now
Mobile
Desktop
Tablet
Mon
Tue
Wed
Thu
Fri
Sat
Sun
3,842Weekly active users
47.3%
User growth rateUser Engagement
Daily activity patterns across user segments
Production API97%
Staging Server82%
Development45%
Last updated: 8:08:34 AM
Real-time Data
Live updates from connected devices
97%Uptime
Last 30 days
42msResponse
Global average
Performance Metrics
Server response times and key indicators
Installation
Usage
import { BentoGrid } from "@/components/ui/bento-grid";<BentoGrid
title="Featured Content"
description="A collection of highlighted items in a modern grid layout."
component={<YourContentHere />}
dark={false}
/>Props
Bento Grid
| Prop | Type | Default | Description |
|---|---|---|---|
dark | boolean | false | Enables dark mode styling for the component |
className | string | "" | Additional CSS classes to apply to the component |
title | React.ReactNode | "" | Title content to be displayed in the component |
description | React.ReactNode | "" | Description text to be displayed in the component |
component | React.ReactNode | undefined | The main content to be rendered inside the bento grid container |
fade | ("top" | "bottom")[] | [] | Adds gradient fade effects to the specified edges of the component |
height | string | "h-88" | CSS height class for the component. Only applies when isFull is false |
enableTitle | boolean | true | Whether to display the title element |
enableDescription | boolean | true | Whether to display the description element |
isFull | boolean | false | When true, the component takes up full height and displays title/description as an overlay at the bottom |