Brutalism
Bold, high-contrast landing page with neo-brutalist design principles. Thick borders and hard shadows.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #000000 | Primary bold color (black). |
| accentColor | string | #ffff00 | High contrast accent color (yellow). |
| shadowOffset | string | 8px | Offset for brutalist shadow effects. |
| borderWidth | string | 4px | Border width for geometric elements. |
When to Use
Perfect for edgy startups, lifestyle brands, and Next.js applications that want a bold 'Neo-Brutalist' aesthetic. Use this full-page template for a high-contrast experience with thick borders, hard shadows, and vibrant primary colors.
Best Practices
Maintain scalable component architecture by keeping foreground text thick and bold. Follow React best practices by pairing this with high-contrast, primary colors. Optimize for performance by using efficient box-shadow renders.
Why This Component Matters
Neo-brutalist design is a powerful visual statement of raw energy and structural honesty. This production-ready UI template 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 `shadowOffset` prop allows you to control how 'thick' the hard shadows are, defining the level of 'Brutalist' impact.
QWhat is the accent color for?
The `accentColor` (typically bright yellow) is used for focal points like buttons and section highlights to ensure they pop against the black borders.
QIs it mobile responsive?
The geometric cards stack into a solid vertical grid on mobile, ensuring the high-contrast lines and hard shadows remain impactful.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.