Sketch Note
Hand-drawn sketch testimonial section with rough aesthetics.
Main Features of Sketch Note
How to Use Sketch Note in Next.js
Installation Guide for Sketch Note
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #fffdf5 | Background color of the component (hex, rgb, or hsl). |
gridColor | string | #444444 | Color of the grid pattern (hex, rgb, or hsl). |
gridOpacity | number | 0.1 | Opacity of the grid pattern (0-1). |
title | string | The Verdict | Main title text. |
titleColor | string | #1f2937 | Color of the title text (hex, rgb, or hsl). |
titleUnderlineColor | string | #facc15 | Color of the title underline (hex, rgb, or hsl). |
titleUnderlineWavy | boolean | true | Whether to use wavy underline style. |
cardBgColor | string | #ffffff | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | #1f2937 | Border color of the testimonial cards (hex, rgb, or hsl). |
cardShadowColor | string | rgba(0,0,0,0.1) | Shadow color of the cards (hex, rgb, or hsl). |
tapeBgColor | string | rgba(254, 240, 138, 0.8) | Background color of tape decorations (hex, rgb, or hsl). |
tapeRotate | number | -2 | Rotation angle of tape decorations in degrees. |
starColor | string | #eab308 | Color of star icons (hex, rgb, or hsl). |
quoteColor | string | #1f2937 | Color of the quote text (hex, rgb, or hsl). |
authorNameColor | string | #1f2937 | Color of the author name text (hex, rgb, or hsl). |
authorCompanyColor | string | #6b7280 | Color of the author company text (hex, rgb, or hsl). |
authorCompanyUppercase | boolean | true | Whether to display company names in uppercase. |
avatarBorderColor | string | #1f2937 | Border color of the avatar images (hex, rgb, or hsl). |
decorativeLineColor | string | #000000 | Color of decorative lines (hex, rgb, or hsl). |
decorativeLineOpacity | number | 0.1 | Opacity of decorative lines (0-1). |
Related Components
When to Use
Ideal for creative labs, educational platforms, and Next.js portfolios that want a playful, hand-crafted aesthetic. Use this React component for a 'sketchbook' testimonial section with rough borders, wavy underlines, and tape decorations.
Best Practices
Follow React best practices by pairing this with playful, informal typography. Maintain scalable component architecture by using it for narrative sections. Optimize for performance by using efficient SVG filters for the 'hand-drawn' lines.
Why This Component Matters in Modern UI Development
Sketch aesthetics break the digital barrier by adding a human, tactile touch to social proof. This production-ready UI component helpsคุณ build an interface that feels approachable and experimental, improving user engagement through visual novelty.
Frequently Asked Questions
QHow is the tape effect created?
It uses semi-transparent `rgba` backgrounds and slight rotations to simulate physical pieces of masking tape holding the cards.
QCan I change the underline style?
Yes, the `titleUnderlineWavy` prop allows you to switch between a standard straight underline and a playful wavy one.
QIs the grid real paper?
The background uses a lightweight CSS grid pattern on top of a soft cream color (`#fffdf5`) to mimic the look of an artist's sketchbook.