Hand-Drawn
Hand-drawn sketchy FAQ with paper texture.
Main Features of Hand-Drawn
How to Use Hand-Drawn in Next.js
Installation Guide for Hand-Drawn
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #fffdf5 | Background color (hex, rgb, or hsl). |
patternColor | string | #444 | Grid pattern color. |
title | string | Q & A | Section title text. |
titleColor | string | #0f172a | Title text color. |
titleUnderlineColor | string | #facc15 | Title underline color. |
shadowBorderColor | string | #cbd5e1 | Shadow border color. |
cardBgColor | string | #ffffff | Card background color. |
activeCardBgColor | string | #fef9c3 | Active card background color. |
cardBorderColor | string | #1e293b | Card border color. |
questionColor | string | #0f172a | Question text color. |
answerColor | string | #475569 | Answer text color. |
answerBorderColor | string | #cbd5e1 | Answer border color. |
tapeBgColor | string | rgba(254, 226, 226, 0.8) | Tape background color. |
Related Components
When to Use
Great for creative portfolios, personal workshops, and Next.js applications that want an organic, 'hand-crafted' aesthetic. Use this React component for a rough, hand-drawn FAQ section with paper textures and playful 'tape' accents.
Best Practices
Maintain consistent spacing within your design system by pairing this with handwritten or organic typography. Follow React best practices by using warm, 'paper-like' background colors. Optimize for performance by using lightweight SVG paths for the hand-drawn elements.
Why This Component Matters in Modern UI Development
Hand-drawn visuals create a sense of approachability and human touch. This production-ready component helpsคุณ build an interface that feels friendly and personalized, improving user trust through aesthetic warmth.
Frequently Asked Questions
QHow real is the paper texture?
It uses a subtle grain overlay combined with a light-colored background filter to mimic the look of unbleached notebook paper.
QCan I change the tape color?
Yes, the `tapeBgColor` prop allows you to choose from various wash-tape styles like pink, blue, or yellow.
QAre the borders perfectly straight?
No, the borders are procedurally 'roughened' through SVG paths to maintain the authentic hand-drawn feel across all components.