Neo-Brutalism
Bold neo-brutalist stats section with graphic design.
Main Features of Neo-Brutalism
How to Use Neo-Brutalism in Next.js
Installation Guide for Neo-Brutalism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | Hard Numbers | Section title text. |
stats | Array<{label: string, value: number, color?: string}> | [] | Array of stat items with label, value, and optional color. |
backgroundColor | string | #FDFD96 | Background color (hex, rgb, or hsl). |
titleColor | string | #000000 | Title text color. |
cardBgColor | string | #ffffff | Card background color. |
cardBorderColor | string | #000000 | Card border color. |
cardShadowColor | string | rgba(0,0,0,1) | Card shadow color. |
cardHoverShadowColor | string | rgba(0,0,0,1) | Card hover shadow color. |
iconBgColor | string | #FF6B6B | Icon background color. |
iconColor | string | #000000 | Icon color. |
valueColor | string | #000000 | Value text color. |
labelBgColor | string | #000000 | Label background color. |
labelTextColor | string | #ffffff | Label text color. |
Related Components
When to Use
Perfect for high-energy brands, street-wear e-commerce, and experimental Next.js portfolios. Use this React component for a bold, neo-brutalist stats section with solid shadows, high-contrast borders, and playful color-coding.
Best Practices
Follow React best practices by pairing this with thick, monospaced typography and saturated primary colors. Maintain scalable component architecture by using it for high-impact metrics. 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
QCan I adjust the shadow depth?
The shadow depth is set to a fixed premium 'Brutalist' thickness, but can be customized via the `cardShadowColor` and internal CSS variables.
QIs it mobile responsive?
Absolutely, the grid of cards stacks vertically on mobile devices while maintaining its bold shadows and high-contrast lines.
QCan I use custom icons?
Yes, the icon background and primary color can be fully customized for each card to match the specific metric theme.