The Blueprint
Hand-drawn blueprint pricing section with sketch aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Rough Estimates | Section title text. |
| plans | Array<{name: string, price: number}> | [] | Array of pricing plans with name and price. |
| features | string[] | [] | Array of feature strings to display. |
| backgroundColor | string | #FFFDF5 | Background color (hex, rgb, or hsl). |
| patternColor | string | #000000 | Grid pattern color. |
| underlineColor | string | #facc15 | Title underline color. |
| shadowBgColor | string | #e2e8f0 | Shadow background color. |
| shadowBorderColor | string | #1e293b | Shadow border color. |
| cardBgColor | string | #ffffff | Card background color. |
| cardBorderColor | string | #1e293b | Card border color. |
| tapeBgColor | string | rgba(254, 240, 138, 0.8) | Tape background color. |
| planNameColor | string | #0f172a | Plan name text color. |
| priceColor | string | #0f172a | Price text color. |
| priceUnderlineColor | string | #f87171 | Price underline color. |
| featureTextColor | string | #0f172a | Feature text color. |
| featureBulletColor | string | #94a3b8 | Feature bullet color. |
| buttonBorderColor | string | #1e293b | Button border color. |
| buttonTextColor | string | #0f172a | Button text color. |
| buttonHoverBgColor | string | #1e293b | Button hover background color. |
| buttonHoverTextColor | string | #ffffff | Button hover text color. |
| buttonText | string | Circle It | Button text. |
When to Use
Excellent for creative labs, educational platforms, and Next.js portfolios that want a playful, hand-crafted aesthetic. Use this React component for a 'blueprint' pricing section with sketch-style borders and rough, hand-drawn effects.
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 patterns for the grid background.
Why This Component Matters
Sketch aesthetics break the digital barrier by adding a human, tactile touch to the interface. This production-ready UI component helpsคุณ build an interface that feels approachable and experimental, improving user engagement through visual novelty.
FAQ
QIs the grid a real image?
No, the grid is a lightweight CSS/SVG pattern, ensuring it stays sharp at any resolution without adding to page weight.
QHow are the rough borders made?
The component uses custom border-radius and shadow combinations to simulate the uneven characteristic of a hand-drawn line.
QCan I change the highlight color?
Yes, the `underlineColor` and `priceUnderlineColor` props allow you to customize the 'marker' highlights used throughout the section.
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.