Neo-Brutalist
Bold neo-brutalist feature section with chunky borders, hard shadows, and raw typography.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| features | Array<{title, description, color}> | 4 Uilora features | Array of feature items with title, description, and accent color. |
| title | string | Make it | Section title text. |
| subtitle | string | Pop. | Section subtitle text. |
| accentColor | string | #FF3B30 | Accent color for hero card and badge. |
When to Use
Perfect for street-wear brands, experimental agency sites, and high-energy portfolios that embrace a neo-brutalist aesthetic with bold typography and raw geometry.
Best Practices
Pair with thick, monospaced typography and saturated colors. Use 3-4 features with distinct accent colors for visual variety. Keep descriptions punchy and direct.
Why This Component Matters
Neo-brutalist design is a powerful visual statement of raw power and structural honesty. It adds a unique architectural signature that stands out from the sea of generic gradient-filled landing pages.
FAQ
QCan I adjust the border thickness?
The component uses border-[3px] by default. You can modify the component source to adjust the thickness.
QIs the color palette customizable?
Yes, each feature card has its own color prop, and the accentColor controls the hero card and badge.
QDoes it support hover effects?
Yes, cards lift and tilt on hover using framer-motion spring physics.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.