Glass Prism
Crystal clear glass prism pricing cards with backdrop blur.
Main Features of Glass Prism
How to Use Glass Prism in Next.js
Installation Guide for Glass Prism
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.