Bento Mosaic
Bento mosaic testimonial grid with expandable cards.
Main Features of Bento Mosaic
How to Use Bento Mosaic in Next.js
Installation Guide for Bento Mosaic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #f5f5f5 | Background color of the component (hex, rgb, or hsl). |
headerCardBgColor | string | #4f46e5 | Background color of the header card (hex, rgb, or hsl). |
headerCardBlurColor | string | rgba(255,255,255,0.1) | Blur effect color for the header card (hex, rgb, or hsl). |
headerTextColor | string | #ffffff | Text color of the header (hex, rgb, or hsl). |
headerText | string | What people are saying. | Header text content. |
card1BgColor | string | #ffffff | Background color of card 1 (hex, rgb, or hsl). |
card1TextColor | string | #525252 | Text color of card 1 (hex, rgb, or hsl). |
card2BgColor | string | #facc15 | Background color of card 2 (hex, rgb, or hsl). |
card2TextColor | string | #000000 | Text color of card 2 (hex, rgb, or hsl). |
card2QuoteColor | string | #000000 | Quote text color of card 2 (hex, rgb, or hsl). |
card2CompanyColor | string | rgba(0,0,0,0.6) | Company text color of card 2 (hex, rgb, or hsl). |
card3BgColor | string | #000000 | Background color of card 3 (hex, rgb, or hsl). |
card3AvatarBorderColor | string | #404040 | Avatar border color of card 3 (hex, rgb, or hsl). |
card3QuoteColor | string | #ffffff | Quote text color of card 3 (hex, rgb, or hsl). |
card3QuoteItalic | boolean | true | Whether to display quotes in italic on card 3. |
card3AuthorColor | string | #ffffff | Author name color of card 3 (hex, rgb, or hsl). |
card3RoleColor | string | #737373 | Author role color of card 3 (hex, rgb, or hsl). |
statCardBgColor | string | #ffffff | Background color of stat cards (hex, rgb, or hsl). |
statValueColor | string | #4f46e5 | Value text color of stat cards (hex, rgb, or hsl). |
statLabelColor | string | #737373 | Label text color of stat cards (hex, rgb, or hsl). |
card5BgColor | string | #faf5ff | Background color of card 5 (hex, rgb, or hsl). |
card5HoverBgColor | string | #f3e8ff | Background color of card 5 on hover (hex, rgb, or hsl). |
card5TextColor | string | #581c87 | Text color of card 5 (hex, rgb, or hsl). |
card5IconColor | string | #9333ea | Icon color of card 5 (hex, rgb, or hsl). |
card5AuthorColor | string | #6b21a8 | Author name color of card 5 (hex, rgb, or hsl). |
card6BgColor | string | #ffffff | Background color of card 6 (hex, rgb, or hsl). |
card6IconBgColor | string | #f5f5f5 | Icon background color of card 6 (hex, rgb, or hsl). |
card6IconColor | string | #eab308 | Icon color of card 6 (hex, rgb, or hsl). |
card6TextColor | string | #525252 | Text color of card 6 (hex, rgb, or hsl). |
Related Components
When to Use
Excellent for complex products, diverse user bases, and Next.js applications that want a high-density, modular information layout. Use this React component for a bento-style testimonial grid with varying card sizes, metrics, and interactive states.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your primary site layout. Follow React best practices by pairing it with high-contrast active highlights. Optimize for performance by using efficient grid-column spans.
Why This Component Matters in Modern UI Development
Bento grids allow you to showcase both qualitative feedback and quantitative metrics (like star ratings or active users) in a unified layout. This production-ready UI component helpsคุณ build an interface that feels structured and modern.
Frequently Asked Questions
QHow does the layout work?
It uses a multi-column CSS grid where cards 'bento' together, with some spanning multiple rows or columns to create a dynamic mosaic.
QCan I add more testimonial cards?
The component is built with a fixed mosaic pattern for maximum visual impact, but the content of each 'tile' is fully customizable.
QAre the statistics real?
The component features stylized stat cards that can be used to showcase aggregate data like '500+ Happy Clients' alongside individual quotes.