Neo-Brutalism
Bold neo-brutalist FAQ with chunky design and hard shadows.
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. |
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
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 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.
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.