Content Blocks
Glass Prism
Crystal clear glass prism pricing cards with backdrop blur.
pricingglassprismblur
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. |