Neo-Brutalist Pop
Chunky bold neo-brutalist masonry grid with marquee effects.
Main Features of Neo-Brutalist Pop
How to Use Neo-Brutalist Pop in Next.js
Installation Guide for Neo-Brutalist Pop
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tiles | Array<{span: string, bg: string, text: string, textCol?: string}> | [{span: 'col-span-1 row-span-1', bg: '#FF6B6B', text: 'POP'}, ...] | Array of tile objects with grid span, background color (hex), text, and optional text color (hex). |
backgroundColor | string | #E0E0E0 | Background color (hex, rgb, or hsl). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhy 'Neo-Brutalist'?
The grid features thick borders (8px), vibrant primary colors, and intentional 'uncomfortable' spacing to simulate the raw structural honesty of the brutalist architectural movement.
QCan I adjust the colors?
Yes, the specific background color for each tile (bg-prop) is fully configurable, allowing you to create 'Cyber' or 'High-Contrast' pop effects.
QIs it mobile responsive?
The grid spans adapt dynamically for mobile, ensuring the bold narrative remains impactful and structural on small screens.