Aero Glass
Aero glass pricing section with Windows Vista aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| plans | Array<{name: string, price: number, description?: string}> | [] | Array of pricing plans with name, price, and optional description. |
| features | string[] | [] | Array of feature strings to display. |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
| backgroundImage | string | https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=2070&auto=format&fit=crop | Background image URL. |
| cardBgColor | string | rgba(255,255,255,0.1) | Card background color. |
| cardBorderColor | string | rgba(255,255,255,0.4) | Card border color. |
| cardBlurColor | string | rgba(255,255,255,0.2) | Card blur effect color. |
| titleColor | string | #ffffff | Title text color. |
| descriptionColor | string | rgba(255,255,255,0.8) | Description text color. |
| priceColor | string | #ffffff | Price text color. |
| featureTextColor | string | rgba(255,255,255,0.9) | Feature text color. |
| buttonBgColor | string | rgba(255,255,255,0.2) | Button background color. |
| buttonTextColor | string | #ffffff | Button text color. |
| buttonBorderColor | string | rgba(255,255,255,0.4) | Button border color. |
| buttonText | string | Purchase | Button text. |
When to Use
Perfect for nostalgic tech brands, early-2000s revival sites, and Next.js projects that want the signature Windows Vista 'Aero' look. Use this React component for a glass pricing section with high-gloss reflections and soft translucency.
Best Practices
Follow React best practices by pairing this with vibrant, abstract background images. Maintain scalable component architecture by using it for high-impact showcase areas. Optimize for performance by managed the blur and reflection filters.
Why This Component Matters
Aero Glass is a landmark of digital design history that evokes a specific era of optimism and depth. This production-ready component helpsคุณ build an interface that feels both nostalgic and technologically sophisticated.
FAQ
QHow are the reflections made?
The component uses multiple stacked linear-gradients and a 'specular' highlight overlay to simulate the glossy surface of 2007-era glass.
QCan I use my own background?
Yes, the `backgroundImage` prop accepts any URL, which is then blurred and darkened to ensure the glass tiers remain the focal point.
QIs it mobile responsive?
The high-gloss effects are hardware-accelerated to ensure 60fps glass transitions on both desktop and high-end mobile devices.
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.