Neo Brutalist
Modern neo-brutalist landing page with bold colors and geometric shapes.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #000000 | Primary bold color (black). |
| accentColor | string | #ffff00 | High contrast accent color. |
| shadowOffset | string | 8px | Offset for brutalist shadows. |
| borderWidth | string | 4px | Border width for geometric elements. |
When to Use
Perfect for bold startups, NFT marketplaces, and Next.js applications that want a modern 'Neo-Brutalist' aesthetic. Use this full-page template for a high-contrast experience with geometric shapes, vibrant accents, and thick architectural borders.
Best Practices
Maintain scalable component architecture by keeping labels short and colors high-contrast. Follow React best practices by pairing this with bold typography. Optimize for performance by using efficient grid transforms for the geometric modules.
Why This Component Matters
Neo-brutalist aesthetics communicate structural honesty and high energy. This production-ready UI template helpsคุณ build an interface that feels solid and unyielding, adding a unique 'Graphic' signature to your brand.
FAQ
QHow were the 'Shadows' made?
The component uses hard-coded CSS box-shadows (`shadowOffset`) without blur to create that distinct, architectural neo-brutalist depth.
QIs the accent color global?
Yes, the `accentColor` prop sets the highlight tone for all primary buttons and geometric focal points across the entire page.
QCan I adjust the borders?
The `borderWidth` prop (default 4px) allows you to control the 'thickness' of the architectural lines defining the layout.
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.