Neo-Brutalism
Bold neo-brutalist pricing cards with chunky 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 |
|---|---|---|---|
title | string | No Hidden Fees. | Section title text. |
titleLine1 | string | No Hidden Fees. | First line of title. |
titleLine2 | string | Just Raw Value. | Second line of title. |
plans | Array<{name: string, price: number, badge?: string}> | [] | Array of pricing plans with name, price, and optional badge. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #F4F4F0 | Background color (hex, rgb, or hsl). |
headerBgColor | string | #FF5E5B | Header background color. |
headerBorderColor | string | #000000 | Header border color. |
headerTextColor | string | #000000 | Header text color. |
headerShadowColor | string | rgba(0,0,0,1) | Header shadow color. |
cardBgColors | string[] | ["#A3E635", "#60A5FA", "#F472B6"] | Array of card background colors. |
cardBorderColor | string | #000000 | Card border color. |
cardTextColor | string | #000000 | Card text color. |
badgeBgColor | string | #000000 | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
priceColor | string | #000000 | Price text color. |
featureCheckBgColor | string | #000000 | Feature check background color. |
featureCheckTextColor | string | #ffffff | Feature check text color. |
buttonBgColor | string | #000000 | Button background color. |
buttonTextColor | string | #ffffff | Button text color. |
buttonHoverBgColor | string | #ffffff | Button hover background color. |
buttonHoverTextColor | string | #000000 | Button hover text color. |
buttonHoverBorderColor | string | #000000 | Button hover border color. |
shadowColor | string | #000000 | Shadow color. |
buttonText | string | Get It Now | Button text. |
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 pricing section with chunky shadows, high-saturation colors, and raw architectural 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 shadow depth?
The component uses hard-coded shadow offsets to maintain the signature brutalist look, but these can be easily adjusted in the Tailwind classes.
QIs the color palette customizable?
Yes, the `cardBgColors` prop allows you to pass an array of unique colors for each tier for maximum visual pop.
QAre the checkmarks custom?
The component uses stylized Lucide icons wrapped in heavy-bordered circles to match the chunky aesthetic.