Neo-Brutal Grid
Neo-brutalist grid testimonial section with bold aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image, video. |
| backgroundColor | string | #FFDEE9 | Background color of the component (hex, rgb, or hsl). |
| backgroundGradientFrom | string | #FFDEE9 | Start color of the background gradient (hex, rgb, or hsl). |
| backgroundGradientTo | string | #B5FFFC | End color of the background gradient (hex, rgb, or hsl). |
| headerBgColor | string | #ffffff | Background color of the header section (hex, rgb, or hsl). |
| headerBorderColor | string | #000000 | Border color of the header section (hex, rgb, or hsl). |
| headerShadowColor | string | rgba(0,0,0,1) | Shadow color of the header (hex, rgb, or hsl). |
| headerTextColor | string | #000000 | Text color of the header section (hex, rgb, or hsl). |
| title | string | The People Have Spoken | Main title text. |
| cardBgColor | string | #ffffff | Background color of the testimonial cards (hex, rgb, or hsl). |
| cardBorderColor | string | #000000 | Border color of the testimonial cards (hex, rgb, or hsl). |
| cardShadowColor | string | rgba(0,0,0,1) | Shadow color of the cards (hex, rgb, or hsl). |
| cardHoverShadowColor | string | rgba(0,0,0,1) | Shadow color of cards on hover (hex, rgb, or hsl). |
| cardHoverTranslate | number | 2 | Translation distance of cards on hover in pixels. |
| avatarBorderColor | string | #000000 | Border color of the avatar images (hex, rgb, or hsl). |
| companyBadgeBgColor | string | #000000 | Background color of company badges (hex, rgb, or hsl). |
| companyBadgeTextColor | string | #ffffff | Text color of company badges (hex, rgb, or hsl). |
| quoteColor | string | #000000 | Color of the quote text (hex, rgb, or hsl). |
| videoContainerBgColor | string | #000000 | Background color of video containers (hex, rgb, or hsl). |
| videoContainerBorderColor | string | #000000 | Border color of video containers (hex, rgb, or hsl). |
| videoContainerHoverBgColor | string | #facc15 | Background color of video containers on hover (hex, rgb, or hsl). |
| playButtonColor | string | #ffffff | Color of play button icons (hex, rgb, or hsl). |
| authorNameColor | string | #000000 | Color of the author name text (hex, rgb, or hsl). |
| authorRoleColor | string | #000000 | Color of the author role text (hex, rgb, or hsl). |
When to Use
Excellent for high-energy brands, street-wear e-commerce, and experimental Next.js portfolios. Use this React component for a bold, neo-brutalist grid where testimonials are displayed as chunky cards with high-contrast shadows and video support.
Best Practices
Follow React best practices by pairing this with thick, monospaced typography and vibrant primary colors. Maintain scalable component architecture by using it for high-impact social proof. Optimize for performance by using CSS-based box-shadows.
Why This Component Matters
Neo-brutalist design is a powerful visual statement of raw power and structural honesty. This production-ready UI component helpsคุณ build an interface that feels solid and unyielding, adding a unique architectural signature to your project.
FAQ
QDoes it support video?
Yes, specific cards in the grid can be designated for video content, featuring high-contrast play buttons and chunky borders.
QCan I change the card tilt?
The component is built with a stable grid layout but can be easily adapted with Framer Motion to add slight random rotations for a more 'raw' feel.
QAre the gradients customizable?
The background supports a full-width linear gradient that can be customized via the `backgroundGradientFrom` and `backgroundGradientTo` props.
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.