Bento Grid
Explore interactive examples and all component variations in our Storybook.
The BentoGrid component provides a flexible grid system inspired by Japanese Bento box design. It allows you to create dynamic, responsive layouts with different sized cells. Perfect for dashboards, feature showcases, content galleries, and any interface requiring varied content organization.
Basic Usage
Main Feature
This is the primary content that takes up more space
Feature 1
Smaller content
Feature 2
Another feature
Wide Feature
Content that spans two columns
Dashboard Layout
Analytics Overview
Total Revenue
$124,563
+12% from last month
Users
2,847
+5.2% today
Growth
+23%
This quarter
Events
12 Today
Recent Activity
Feature Showcase
Premium Features
Unlock advanced capabilities with our premium plan
Customer Love
Join thousands of happy customers
4.9/5 Rating
Support
24/7 customer support
< 2min response
Email Marketing
Powerful email campaigns
Automation
Set up automated workflows to save time and increase efficiency
50+ Templates
Content Gallery
Modern Office Design
Workspace Setup
Team Collaboration
Creative Space
Conference Room
Responsive Layout
Responsive Hero
This card adapts to different screen sizes
Card 1
Responsive content
Card 2
Adapts to screen
Wide Card
Spans multiple columns on larger screens
Card 3
Mobile friendly
Properties
BentoGrid
| Property | Type | Description |
|---|---|---|
className | string | Additional CSS classes for customizing the grid layout. |
children | ReactNode | BentoCard components to display in the grid. |
BentoCard
| Property | Type | Description |
|---|---|---|
className | string | CSS classes for positioning and styling the card. Use grid classes like col-span-2, row-span-3 for layout. |
children | ReactNode | Content of the card. |
Layout Classes
Grid Configuration
grid-rows-{n}- Set number of rows (e.g.,grid-rows-3,grid-rows-4)grid-cols-{n}- Set number of columns (default is 3)gap-{size}- Set gap between cards
Card Positioning
col-span-{n}- Span multiple columns (1-3)row-span-{n}- Span multiple rowscol-start-{n}- Start at specific columnrow-start-{n}- Start at specific rowcol-end-{n}- End at specific columnrow-end-{n}- End at specific row
Responsive Prefixes
sm:- Small screens (640px+)md:- Medium screens (768px+)lg:- Large screens (1024px+)xl:- Extra large screens (1280px+)
Accessibility
The BentoGrid component includes basic accessibility features:
- Semantic Structure - Uses proper div elements with grid layout
- Keyboard Navigation - Cards can be made focusable with proper tabindex
- Screen Reader Support - Content is accessible to screen readers
- Responsive Design - Adapts to different screen sizes and orientations
- Focus Management - Interactive cards should include proper focus indicators
Common Use Cases
The BentoGrid component is perfect for:
- Dashboards - Analytics overviews with different sized metrics
- Feature Showcases - Product features with varying importance
- Content Galleries - Image galleries with featured content
- Landing Pages - Hero sections with supporting information
- Portfolio Layouts - Creative work with different aspect ratios
- News Layouts - Articles with featured stories
- App Overviews - Different app sections and features
Best Practices
- Visual Hierarchy - Use larger cards for more important content
- Consistent Spacing - Maintain consistent gaps between cards
- Responsive Design - Test layouts on different screen sizes
- Content Balance - Distribute content evenly across the grid
- Color Coordination - Use consistent color schemes across cards
- Interactive Elements - Add hover effects and transitions for better UX
- Accessibility - Ensure proper contrast and keyboard navigation
- Performance - Optimize images and content for fast loading