Glass Prism
Crystal clear glass prism pricing cards with backdrop blur.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Crystal Clear Pricing | Section title text. |
| plans | Array<{name: string, monthlyPrice: number, yearlyPrice: number, features?: string[]}> | [] | Array of pricing plans with name, monthly and yearly prices, and optional features. |
| features | string[] | [] | Array of feature strings to display. |
| backgroundColor | string | #0f172a | Background color (hex, rgb, or hsl). |
| blob1Color | string | #9333ea | First blob color for background effect. |
| blob2Color | string | #06b6d4 | Second blob color for background effect. |
| titleColor | string | #ffffff | Title text color. |
| toggleBgColor | string | rgba(255,255,255,0.1) | Toggle background color. |
| toggleBorderColor | string | rgba(255,255,255,0.2) | Toggle border color. |
| toggleActiveColor | string | #ffffff | Toggle active state color. |
| toggleInactiveColor | string | rgba(255,255,255,0.4) | Toggle inactive state color. |
| cardBgColor | string | rgba(255,255,255,0.05) | Card background color. |
| activeCardGradientFrom | string | rgba(168, 85, 247, 0.2) | Active card gradient start color. |
| activeCardGradientTo | string | rgba(6, 182, 212, 0.2) | Active card gradient end color. |
| cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
| planNameColor | string | rgba(255,255,255,0.8) | Plan name text color. |
| priceColor | string | #ffffff | Price text color. |
| priceGradientFrom | string | #ffffff | Price gradient start color. |
| priceGradientTo | string | rgba(255,255,255,0.5) | Price gradient end color. |
| featureTextColor | string | rgba(255,255,255,0.6) | Feature text color. |
| featureIconBgColor | string | rgba(255,255,255,0.1) | Feature icon background color. |
| buttonBgFrom | string | rgba(255,255,255,0.1) | Button gradient start color. |
| buttonBgTo | string | rgba(255,255,255,0.05) | Button gradient end color. |
| buttonBorderColor | string | rgba(255,255,255,0.1) | Button border color. |
| buttonTextColor | string | #ffffff | Button text color. |
| buttonText | string | Choose Plan | Button text. |
When to Use
Excellent for modern SaaS platforms, AI tools, and Next.js applications that want a high-fidelity, transparent aesthetic. Use this React component for a pricing section where tiers are displayed as blurry glass cards with vibrant background glow effects.
Best Practices
Maintain consistent spacing within your design system by using it on dark or textured backgrounds to maximize the glass effect. Follow React best practices by using high-contrast text for the features list. Optimize for performance by managed the blur intensity on mobile devices.
Why This Component Matters
Glassmorphism creates a sense of depth and technical sophistication that appeals to modern tech users. This production-ready UI component helpsคุณ build an interface that feels lightweight and premium, improving the perceived quality of your product tiers.
FAQ
QIs the monthly/yearly toggle included?
Yes, the component features a smooth animated toggle that switches between monthly and yearly pricing plans.
QCan I customize the background blobs?
The `blob1Color` and `blob2Color` props allow you to customize the underlying glow colors to match your brand's palette.
QHow many features can I list?
While you can list many, it's best to keep it to 5-8 key features to ensure the glass card remains balanced and legible.
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.