Industrial
Industrial pricing section with mechanical aesthetics.
Main Features of Industrial
How to Use Industrial in Next.js
Installation Guide for Industrial
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
badgeText | string | Fig. 1.0 - Pricing Specs | Badge text displayed above plans. |
badgeBgColor | string | #64b5f6 | Badge background color. |
badgeTextColor | string | #001e36 | Badge text color. |
plans | Array<{name: string, price: number, reference?: string}> | [] | Array of pricing plans with name, price, and optional reference. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #001e36 | Background color (hex, rgb, or hsl). |
gridColor | string | rgba(100,181,246,0.1) | Grid pattern color. |
cardBorderColor | string | rgba(100,181,246,0.3) | Card border color. |
cardHoverBgColor | string | rgba(100,181,246,0.05) | Card hover background color. |
planNameColor | string | #64b5f6 | Plan name text color. |
priceColor | string | #64b5f6 | Price text color. |
featureTextColor | string | rgba(100,181,246,0.8) | Feature text color. |
featureNumberColor | string | #64b5f6 | Feature number text color. |
featureBorderColor | string | rgba(100,181,246,0.2) | Feature border color. |
buttonBorderColor | string | #64b5f6 | Button border color. |
buttonTextColor | string | #64b5f6 | Button text color. |
buttonHoverBgColor | string | #64b5f6 | Button hover background color. |
buttonHoverTextColor | string | #001e36 | Button hover text color. |
cornerColor | string | #64b5f6 | Corner accent color. |
referenceTextColor | string | rgba(100,181,246,0.5) | Reference text color. |
labelTextColor | string | rgba(100,181,246,0.5) | Label text color. |
buttonText | string | Order | Button text. |
Related Components
When to Use
Excellent for technical equipment, manufacturing tools, and Next.js applications that want a rugged 'Industrial' feel. Use this React component for a pricing section with blueprint-style grids and mechanical corner accents.
Best Practices
Maintain consistent spacing within your design system by using it on deep navy or slate backgrounds. Follow React best practices by pairing it with technical, monospaced typography. Optimize for performance by using efficient grid transforms for the background.
Why This Component Matters in Modern UI Development
Industrial aesthetics communicate durability and engineering precision. This production-ready UI component helpsคุณ build an interface that feels built to last, reinforcing a brand identity focused on reliability.
Frequently Asked Questions
QWhat is the 'Reference ID'?
Each plan features a small reference ID (e.g., 'Ref: A-101') to simulate the look of a technical parts catalog or engineering specification sheet.
QCan I change the corner accents?
Yes, the `cornerColor` prop allows you to customize the L-shaped mechanical indicators to match your brand's highlight color.
QIs the blueprint grid real?
The grid is a lightweight CSS pattern optimized for performance, providing a technical backdrop without the weight of a large image.