Dark Executive
Premium dark executive pricing section with luxury aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| badgeText | string | The Gold Standard | Badge text displayed above title. |
| badgeColor | string | #D4AF37 | Badge color. |
| title | string | Membership | Section title text. |
| plans | Array<{name: string, price: number, description?: string}> | [] | Array of pricing plans with name, price, and optional description. |
| backgroundColor | string | #050505 | Background color (hex, rgb, or hsl). |
| containerBgColor | string | rgba(23, 23, 23, 0.5) | Container background color. |
| containerBorderColor | string | rgba(255,255,255,0.1) | Container border color. |
| cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
| planNameColor | string | rgba(163, 163, 163, 1) | Plan name text color. |
| priceColor | string | #D4AF37 | Price text color. |
| descriptionColor | string | rgba(115, 115, 115, 1) | Description text color. |
| buttonTextColor | string | #D4AF37 | Button text color. |
| buttonBorderColor | string | rgba(212, 175, 55, 0.3) | Button border color. |
| buttonHoverBgColor | string | #D4AF37 | Button hover background color. |
| buttonHoverTextColor | string | #ffffff | Button hover text color. |
| accentLineColor | string | #D4AF37 | Accent line color. |
| buttonText | string | Join Now | Button text. |
When to Use
Ideal for enterprise service providers, high-end consulting firms, and Next.js applications that want a luxury 'Pro' aesthetic. Use this React component for a premium dark-mode pricing section with gold accents and minimalist information hierarchy.
Best Practices
Maintain consistent spacing within your design system by using it on pure black or deep navy backgrounds. Follow React best practices by using light, airy typography. Optimize for performance by using efficient container background colors.
Why This Component Matters
Luxury aesthetics communicate exclusivity and trust. This production-ready component provides a refined version of this aesthetic, adding a layer of architectural depth and perceived value to your pricing tiers.
FAQ
QWhat makes it 'luxury'?
It uses a meticulous combination of deep blacks, golden accent colors (`#D4AF37`), and ultra-fine borders to create a high-end feel.
QCan I change the gold color?
Yes, the `badgeColor`, `priceColor`, and `accentLineColor` props allow you to swap gold for silver, platinum, or any brand-specific metallic.
QDoes it support long descriptions?
The layout is optimized for short, impactful taglines to maintain its minimalist and exclusive aesthetic.
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.