Neo-Brutalism
Bold neo-brutalist FAQ with chunky design and hard shadows.
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 |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #FFF4E0 | Background color (hex, rgb, or hsl). |
headerBgColor | string | #FF4D4D | Header background color. |
headerTextColor | string | #ffffff | Header text color. |
headerBorderColor | string | #000000 | Header border color. |
headerShadowColor | string | rgba(0,0,0,1) | Header shadow color. |
title | string | Common Queries | Header title text. |
cardBgColor | string | #ffffff | Card background color. |
cardBorderColor | string | #000000 | Card border color. |
cardTextColor | string | #000000 | Card text color. |
activeCardBgColor | string | #5D9CFF | Active card background color. |
activeCardTextColor | string | #000000 | Active card text color. |
shadowColor | string | rgba(0,0,0,1) | Shadow color for cards. |
iconBorderColor | string | #000000 | Icon border color. |
Related Components
When to Use
Perfect for street-wear brands, experimental agency sites, and high-energy Next.js portfolios that adopt a 'neo-brutalist' aesthetic. Use this React component for a bold, high-contrast FAQ section with chunky shadows and raw geometric borders.
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 for the 'chunky' effect.
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 intensity?
Yes, the shadow color and depth can be customized via the `shadowColor` prop to match your brand's contrast level.
QAre the colors too bright?
The default theme uses high-saturation colors, but you can swap them for more muted tones while keeping the layout's structural boldness.
QIs it mobile responsive?
Absolutely, the layout scales perfectly, and the shadows adapt to maintain visual balance on smaller screens.