Neo-Brutalist
Bold neo-brutalist feature section with chunky design.
Main Features of Neo-Brutalist
How to Use Neo-Brutalist in Next.js
Installation Guide for Neo-Brutalist
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, color: string, description?: string}> | [] | Array of feature items with title, color, and optional description. |
backgroundColor | string | #FDFFFC | Background color (hex, rgb, or hsl). |
topBarColor | string | #000000 | Top bar background color. |
badgeText | string | NEW FEATURE | Badge text. |
badgeColor | string | #FF3B30 | Badge background color. |
title | string | Make it | Section title text. |
subtitle | string | Pop. | Section subtitle text. |
description | string | Forget subtle. We bring the noise. High contrast, bold typography, and interactions that smack you in the face. | Section description text. |
cardBorderColor | string | #000000 | Card border color. |
cardTextColor | string | #000000 | Card text color. |
numberBgColor | string | #000000 | Number badge background color. |
numberTextColor | string | #ffffff | Number badge text color. |
Related Components
When to Use
Perfect for street-wear brands, experimental agency sites, and high-energy Next.js portfolios. Use this React component for a bold, neo-brutalist feature section with chunky borders, high-saturation colors, and raw typographic hierarchy.
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 section headers. 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 border thickness?
The component uses standard Tailwind border widths, which can be customized via the component's internal CSS or props.
QIs the color palette customizable?
Yes, every primary and secondary color can be controlled via the `backgroundColor`, `topBarColor`, and `badgeColor` props.
QDoes it support hover effects?
The default design focuses on structural boldness, but interactive scales and shadow shifts can be easily added to the cards.