Diagonal
Diagonal slice gallery with neo-brutalism and cyber aesthetics.
Main Features of Diagonal
How to Use Diagonal in Next.js
Installation Guide for Diagonal
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
Diagonal-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 '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.