Video Bento
Video-enabled bento testimonial grid with modal playback.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image, video. |
| backgroundColor | string | #0a0a0a | Background color of the component (hex, rgb, or hsl). |
| title | string | Video Testimonials | Main title text. |
| titleColor | string | #ffffff | Color of the title text (hex, rgb, or hsl). |
| cardBgColor | string | #171717 | Background color of the testimonial cards (hex, rgb, or hsl). |
| cardBorderColor | string | rgba(255,255,255,0.1) | Border color of the testimonial cards (hex, rgb, or hsl). |
| imageOverlayColor | string | rgba(0,0,0,0.4) | Overlay color for images (hex, rgb, or hsl). |
| imageHoverOverlayColor | string | rgba(0,0,0,0.2) | Overlay color for images on hover (hex, rgb, or hsl). |
| playButtonBgColor | string | rgba(255,255,255,0.2) | Background color of play buttons (hex, rgb, or hsl). |
| playButtonBorderColor | string | rgba(255,255,255,0.3) | Border color of play buttons (hex, rgb, or hsl). |
| playButtonIconColor | string | #ffffff | Icon color of play buttons (hex, rgb, or hsl). |
| playButtonSize | number | 32 | Size of play buttons in pixels. |
| authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
| authorRoleColor | string | rgba(255,255,255,0.7) | Color of the author role text (hex, rgb, or hsl). |
| gradientFromColor | string | rgba(0,0,0,0.8) | Start color of the gradient overlay (hex, rgb, or hsl). |
| gradientToColor | string | transparent | End color of the gradient overlay (hex, rgb, or hsl). |
When to Use
Ideal for video-first brands, course creators, and Next.js platforms that want to prioritize authenticity. Use this React component for a video-enabled bento grid where testimonials can be played directly in a modal overlay.
Best Practices
Follow React best practices by using high-quality thumbnail images for the video tiles. Maintain consistent spacing within your design system by aligning the grid tiles. Optimize for performance by lazy-loading the video players only when the modal is opened.
Why This Component Matters
Video testimonials are the highest form of social proof as they convey tone and emotion that text cannot. This production-ready UI component helpsคุณ build an interface that feels human and trustworthy, significantly increasing conversion potential.
FAQ
QHow do the videos play?
When a user clicks a tile, it opens a focused modal with an embedded video player for a distraction-free experience.
QCan I use YouTube links?
The component is built to handle various video sources, but it's best paired with high-quality MP4s or hosted video links in the `media` property.
QIs the bento grid responsive?
Yes, the mosaic layout automatically collapses into a single-column list on mobile to ensure the play buttons remain easily tappable.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.