Brutalist Archive
Brutalist feature grid with bold typography and stark contrasts.
Main Features of Brutalist Archive
How to Use Brutalist Archive in Next.js
Installation Guide for Brutalist Archive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, desc: string, icon?: React.ReactNode, img?: string}> | [{title: 'Global Edge', desc: 'Latency is a choice. We chose zero.', img: '...'}, ...] | Array of feature items with title, description, optional icon, and optional image. |
backgroundColor | string | #EBEBEB | Background color (hex, rgb, or hsl). |
hoverColor | string | #FF3333 | Hover state color (hex, rgb, or hsl). |
borderColor | string | #000000 | Border 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
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Perfect for edgy brands, experimental studios, and Next.js portfolios that want a dramatic 'Brutalist' aesthetic. Use this feature archive for a high-intensity experience with bold typography and high-contrast 'Raw' design elements.
Best Practices
Maintain consistent spacing within your design system by using it for aggressive brand storytelling. Follow React best practices by pairing it with bold, technical typography. Optimize for performance by using efficient hover transforms.
Why This Component Matters in Modern UI Development
Brutalist 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 (01, 02) to simulate a technical feature repository or architectural project archive.
QIs the hover color editable?
Yes, the primary hover state (default Red) can be customized to match your brand's specific high-intensity accent palette.
QHow does the alignment work?
It uses a rigid asymmetric grid system that ensures perfect alignment while maintaining that intentionally uncomfortable brutalist tension.