Neo-Brutalism
Bold neo-brutalist pricing cards with chunky shadows.
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. |
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
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 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.
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.