Sketch Grid
Hand-drawn sketch masonry grid with rough aesthetics.
Main Features of Sketch Grid
How to Use Sketch Grid in Next.js
Installation Guide for Sketch Grid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [...9 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 | #f0f0f0 | Background color (hex, rgb, or hsl). |
gridColor | string | #ccc | Grid pattern 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
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an organic 'Sketch' aesthetic. Use this layout for an engaging experience where content feels 'Mailed' and 'Drafted' by physical sketch lines.
Best Practices
Maintain scalable component architecture by keeping the sketch colors consistent with your primary palette. Follow React best practices by pairing this with bold, technical typography. Optimize for performance by managed the grid renders.
Why This Component Matters in Modern UI Development
Hand-drawn sketch animations create a sense of digital 'Authenticity' and human touch. This production-ready UI template helpsคุณ build an interface that feels alive and 'Drafted', adding a unique signatures to your brand structure.
Frequently Asked Questions
QAre the lines real?
The component features localized SVG filters and rough CSS borders to simulate organic 'Sketch' lines that react to user focus.
QCan I adjust the grit?
Absolutely, you can change both the `backgroundColor` and `gridColor` to create 'Graph-Paper' or 'Industrial' sketch effects.
QIs it mobile responsive?
The grid spans and organic offsets scale for mobile, ensuring the 'Draft' narrative remains impactful and structural on small screens.