Sketchbook
Hand-drawn sketchbook timeline with paper texture.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{year: string, title: string, desc: string, category: string}> | [] | Array of timeline items with year, title, description, and category. |
| backgroundColor | string | #fffdf5 | Background color (hex, rgb, or hsl). |
| paperTextureColor | string | #444 | Paper texture pattern color. |
| lineColor | string | #333 | Timeline line color. |
| cardBgColor | string | #ffffff | Card background color. |
| cardBorderColor | string | #1e293b | Card border color. |
| titleColor | string | #0f172a | Title text color. |
| textColor | string | #475569 | Text color. |
| yearColor | string | rgba(15, 23, 42, 0.1) | Year text color. |
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' timeline with rough lines, paper textures, and large background 'Year' watermarks.
Best Practices
Follow React best practices by pairing this with playful, informal typography. Maintain consistent spacing within your design system by using it on soft cream or paper-textured backgrounds. Optimize for performance by using efficient CSS patterns for the paper texture.
Why This Component Matters
Sketch aesthetics break the digital barrier by adding a human, tactile touch to your company history. This production-ready UI component helpsคุณ build an interface that feels approachable and experimental, improving user engagement through visual novelty.
FAQ
QIs the paper texture an image?
No, the texture is created using a lightweight CSS SVG pattern (`paperTextureColor`), ensuring fast load times while maintaining the hand-drawn look.
QCan I change the line color?
Yes, the `lineColor` prop allows you to adjust the 'pencil' or 'ink' color used for the central timeline spine.
QWhat is the watermark effect?
It places a large, semi-transparent year indicator behind each card to reinforce the 'artist's notebook' layout.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.