Sketch Brutal Layout
Rough sketch-style bento grid with hand-drawn aesthetics.
Main Features of Sketch Brutal Layout
How to Use Sketch Brutal Layout in Next.js
Installation Guide for Sketch Brutal Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
heroTitle | string | ROUGH | Hero section title. |
heroSubtitle | string | DRAFT | Hero section subtitle. |
heroBadge | string | WIP | Hero section badge text. |
sideCard1Icon | React.ReactNode | First side card icon component (optional). | |
sideCard1Title | string | SKETCH | First side card title. |
sideCard2Icon | React.ReactNode | Second side card icon component (optional). | |
sideCard2Title | string | BRUTAL | Second side card title. |
bottomLeftQuote | string | Imperfection is beauty. | Bottom left section quote text. |
bottomLeftAvatars | number | 4 | Number of avatar images to display in bottom left. |
bottomRightText | string | WORK IN PROGRESS | Bottom right section text. |
backgroundColor | string | #f5f5f0 | Background color (hex, rgb, or hsl). |
heroColor | string | #ff6b6b | Hero section color (hex, rgb, or hsl). |
sideCard1Color | string | #4ecdc4 | First side card color (hex, rgb, or hsl). |
sideCard2Color | string | #ffe66d | Second side card 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
Excellent for creative agencies, experimental portfolios, and Next.js applications that want an organic 'Sketchy Brutalist' aesthetic. Use this layout to communicate digital 'Hand-Craft', structural honesty, and creative WIP culture.
Best Practices
Maintain scalable component architecture by keeping the sketched lines consistent. Follow React best practices by pairing this with bold, unconventional typography. Optimize for performance by using efficient SVGs for the sketch-masks.
Why This Component Matters in Modern UI Development
Sketch-based 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 project structure.
Frequently Asked Questions
QIs the 'Sketch' real?
The component features a localized SVG filter system that adds a subtle hand-drawn vibration and rough edge to all grid containers.
QCan I use it for branding?
Perfectly, the `Sketch Brutal` aesthetic is ideal for brands that want to position themselves as creative, transparent, and approachable.
QAre colors editable?
Absolutely, each grid section (Hero, Side Cards) features a unique color variable to match your specific brand's creative palette.