Neo-Brutalism
Bold neo-brutalist stats section with graphic design.
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. |
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
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
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.
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.