Brutalism
Bold, high-contrast landing page with neo-brutalist design principles. Thick borders and hard shadows.
Main Features of Brutalism
How to Use Brutalism in Next.js
Installation Guide for Brutalism
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.