Hand-Drawn
Hand-drawn sketchy FAQ with paper texture.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.