Neo-Brutal Grid
Neo-brutalist grid testimonial section with bold aesthetics.
Main Features of Neo-Brutal Grid
How to Use Neo-Brutal Grid in Next.js
Installation Guide for Neo-Brutal Grid
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, 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). |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.