Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
Main Features of Neo-Brutal Layout
How to Use Neo-Brutal Layout in Next.js
Installation Guide for Neo-Brutal Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
mainTitle | string | Make It Pop! | Main title text (supports for line breaks). |
mainSubtitle | string | Main subtitle text. | |
warningText | string | WARNING: LOUD DESIGN | Warning text displayed in header. |
navItems | string[] | ['Works', 'About', 'Shop', 'Contact'] | Array of navigation item strings. |
feature1Title | string | COMMAND | First feature card title. |
feature1Description | string | Take Control. | First feature card description. |
feature2Title | string | SECURE | Second feature card title. |
feature3Percentage | string | 99% | Third feature card percentage value. |
marqueeItems | string[] | ['START A PROJECT', '★', 'BOOK A CALL'] | Array of marquee scrolling items. |
backgroundColor | string | #B8C0FF | Background color (hex, rgb, or hsl). |
headerColor | string | #FF90E8 | Header section color (hex, rgb, or hsl). |
sidebarColor | string | #FFC900 | Sidebar section color (hex, rgb, or hsl). |
feature2Color | string | #23A094 | Second feature card color (hex, rgb, or hsl). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Obsidian Layout
Dark mode bento grid with obsidian styling and glowing accents.
View Component
When to Use
Ideal for edgy brands, creative agencies, and Next.js applications that want a vibrant 'Neo-Brutalist' aesthetic. Use this layout to communicate energy, playfulness, and confidence through bold colors and high-contrast 'Loud' ডিজাইন.
Best Practices
Follow React best practices by using chunky borders (4px+) and high-contrast colors. Maintain scalable component architecture by keeping the marquee items focused. Optimize for performance by managed the marquee-speed multiplier.
Why This Component Matters in Modern UI Development
Neo-brutalist aesthetics communicate power, rebellion, and digital confidence. This production-ready UI template helpsคุณ build an interface that feels energetic and alive, breaking the 'standard' minimalist web rules.
Frequently Asked Questions
QAre the borders real?
Yes, the component features a built-in neo-brutal shadow system that uses pure CSS for high-performance chunky borders.
QIs the marquee editable?
Absolutely, the marquee items in the footer can be customized with any string or symbol to fit your brand's specific promotional tone.
QDoes it work on phone?
The layout is fully responsive, though the chunky borders are slightly scaled down on mobile to maintain usable touch-areas.