Neo Brutalism
Classic neo-brutalism landing page with high contrast and raw aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #000000 | Primary raw color (black). |
| accentColor | string | #ff006e | High contrast accent color. |
| shadowOffset | string | 8px | Offset for brutalist shadows. |
| borderWidth | string | 4px | Border width for raw elements. |
When to Use
Ideal for high-energy brands, edgy portfolios, and Next.js platforms that want a raw 'Neo-Brutalism' aesthetic. Use this full-page template for a high-contrast experience with pink accents, heavy black borders, and uncompromised structural depth.
Best Practices
Maintain consistent spacing within your design system by respecting the 'bold' layout philosophy. Follow React best practices by pairing this with high-contrast typography. Optimize for performance by managed the multi-layer card renders.
Why This Component Matters
Raw neo-brutalism is a visual statement of digital authenticity and power. This production-ready UI template helpsคุณ build an interface that feels loud and established, breaking away from standard 'soft' design trends.
FAQ
QWhat is the difference from 'Neo-Brutalist'?
The 'Neo-Brutalism' variant focuses on higher contrast and raw, vibrant color pairings (like black and hot pink) compared to the more geometric variant.
QCan I change the primary neon?
Yes, the `accentColor` prop (default #ff006e) allows you to set the primary 'Pop' color for the entire raw interface.
QIs it mobile friendly?
The raw elements stack into a high-impact vertical grid on mobile, ensuring that the bold lines and shadows remain legible and effective.
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.