Diagonal
Diagonal slice gallery with neo-brutalism and cyber aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...array of image URLs] | Array of image source URLs. |
| backgroundColor | string | #09090b | Background color (hex, rgb, or hsl). |
| labelPrefix | string | IMG | Prefix text for image labels. |
| overlayColor | string | #a855f7 | Overlay accent color (hex, rgb, or hsl). |
| badgeColor | string | #84cc16 | Badge background color (hex, rgb, or hsl). |
| badgeTextColor | string | #000000 | Badge text color (hex, rgb, or hsl). |
| rows | number | 3 | Number of diagonal rows to display. |
When to Use
Ideal for edgy streetwear brands, experimental art portfolios, and Next.js applications that want an energetic 'Diagonal' aesthetic. Use this gallery to showcase project collections with a high-intensity, industrial 'Raw' vibe.
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 marquee intensity.
Why This Component Matters
Diagonal-based aesthetics communicate power, mystery, and structural honesty. This production-ready UI template helps you build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
FAQ
QWhy 'Diagonal'?
The gallery features skewed containers and slanted text paths to simulate the raw structural honesty of the brutalist architectural movement.
QCan I adjust colors?
Yes, both the primary 'overlayColor' and the specific 'badgeColor' are fully configurable, allowing you to create 'Cyber' or 'Industrial' pop effects.
QIs it mobile responsive?
The diagonal rows adapt their spans dynamically for mobile, ensuring the bold narrative remains impactful and structural on small screens.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.