Brutalist Grid
Brutalist masonry grid with stark contrasts and bold shapes.
Main Features of Brutalist Grid
How to Use Brutalist Grid in Next.js
Installation Guide for Brutalist Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...12 image URLs] | Array of image URLs. |
content | Array<{type: 'img'|'text', src?: string, title?: string, text?: string, span?: string}> | Array of content items (images or text cards). If not provided, default content is generated from images. | |
backgroundColor | string | #f5f5f5 | Background color (hex, rgb, or hsl). |
indexPrefix | string | Index | Prefix text for item index labels. |
hoverColor | string | #facc15 | Hover state color for text cards (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
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Excellent for technical portfolios, edgy agencies, and Next.js applications that want a dramatic 'Brutalist' aesthetic. Use this grid to communicate structural scale, and natural craft through architectural modules.
Best Practices
Maintain consistent spacing within your design system by using variable, organic grid gaps. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by using efficient image textures.
Why This Component Matters in Modern UI Development
Brutalist-based aesthetics communicate power, mystery, and structural honesty. This production-ready UI template helpsคุณ build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
Frequently Asked Questions
QWhy is it 'Archive'?
The grid is designed with an indexing feel (Index 01, 02) to simulate a technical feature repository or architectural project repository.
QCan I use color images?
Absolutely, while optimized for high-contrast, moody photography, you can apply any visual assets to the grid layers effectively.
QIs the hover color real?
Yes, the primary hover state (default yellow) for text tiles is configurable to match your brand's specific high-intensity accent palette.