Luxury Ethereal
Luxury ethereal pricing section with gold accents.
Main Features of Luxury Ethereal
How to Use Luxury Ethereal in Next.js
Installation Guide for Luxury Ethereal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | ELEVATION | Section title text. |
plans | Array<{name: string, price: number | string}> | [] | Array of pricing plans with name and price (can be number or string). |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
blob1FromColor | string | #312e81 | First blob gradient start color. |
blob1ViaColor | string | #581c87 | First blob gradient middle color. |
blob2FromColor | string | #9f1239 | Second blob gradient start color. |
blob2ViaColor | string | #831843 | Second blob gradient middle color. |
titleColor | string | rgba(255,255,255,0.8) | Title text color. |
cardBgColor | string | rgba(255,255,255,0.05) | Card background color. |
activeCardBgColor | string | rgba(255,255,255,0.1) | Active card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
planNameColor | string | #ffffff | Plan name text color. |
dividerColor | string | #ffffff | Divider color. |
priceColor | string | #ffffff | Price text color. |
featureTextColor | string | rgba(255,255,255,0.6) | Feature text color. |
featureIconColor | string | #ffffff | Feature icon color. |
buttonBorderColor | string | rgba(255,255,255,0.2) | Button border color. |
buttonTextColor | string | #ffffff | Button text color. |
buttonHoverBgColor | string | #ffffff | Button hover background color. |
buttonHoverTextColor | string | #000000 | Button hover text color. |
activeCardShadowColor | string | rgba(147, 51, 234, 0.2) | Active card shadow color. |
buttonText | string | SELECT | Button text. |
Related Components
When to Use
Perfect for high-fashion, premium lifestyle brands, and Next.js applications that want an ethereal, luxurious feel. Use this React component for a luxury pricing section with gold accents, soft background glows, and elegant dividers.
Best Practices
Maintain consistent spacing within your design system by using it on dark, atmospheric backgrounds. Follow React best practices by pairing it with high-quality imagery. Optimize for performance by using hardware-accelerated transforms for the background blobs.
Why This Component Matters in Modern UI Development
Luxury design is about the balance of space and detail. This production-ready component helpsคุณ build an interface that feels expansive and premium, reinforcing a high-ticket brand identity.
Frequently Asked Questions
QHow is the glow created?
It uses two large radial-gradient 'blobs' that animate slowly in the background, creating a soft, shifting light effect.
QCan I adjust the card opacity?
The `cardBgColor` uses an alpha channel (`rgba`), allowing you to control exactly how much of the background glow shines through the cards.
QIs it mobile responsive?
Yes, the cards stack vertically on mobile while the background blobs scale to maintain the ethereal atmosphere.