Dark Executive
Premium dark executive pricing section with luxury aesthetics.
Main Features of Dark Executive
How to Use Dark Executive in Next.js
Installation Guide for Dark Executive
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.