The Blueprint
Hand-drawn blueprint pricing section with sketch aesthetics.
Main Features of The Blueprint
How to Use The Blueprint in Next.js
Installation Guide for The Blueprint
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.