Neo-Brutalist
Drag to dismiss lightbox with high contrast neo-brutalist design.
Main Features of Neo-Brutalist
How to Use Neo-Brutalist in Next.js
Installation Guide for Neo-Brutalist
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=2000&auto=format&fit=crop | Main image source URL. |
backgroundColor | string | #f0f0f0 | Background color (hex, rgb, or hsl). |
buttonText | string | View RAW | Button text. |
projectTitle | string | Project_09 | Project title text. |
metadata | string | ISO 400 • F/2.8 | Image metadata text. |
closeText | string | CLOSE | Close button text. |
dragHintText | string | DRAG TO DISMISS | Drag hint text. |
borderColor | string | #000000 | Border color (hex, rgb, or hsl). |
buttonColor | string | #000000 | Button background color (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for edgy streetwear brands, technical archives, and Next.js applications that want a high-intensity 'Neo-Brutalist' aesthetic. Use this lightbox for a high-octane experience where content feels 'Raw' and 'Structural'.
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 managed the border pattern renders.
Why This Component Matters in Modern UI Development
Neo-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 'Drag to Dismiss'?
The component features localized spring physics that allow users to 'throw' the modal away, simulating the raw structural tactile feel of the brutalist movement.
QCan I adjust the borders?
Yes, both the primary 'borderColor' and the specific width (default 2px/4px) are fully configurable to match your brand's specific industrial intensity.
QIs it mobile responsive?
The drag behavior and typographic scales adapt dynamically for mobile, Ensuring the bold narrative remains impactful and structural on small screens.