Skip to content

Shader glow

Dark pricing card with a drifting WebGL glow.

Usage

Usage
import { ShaderPricingCard } from '@/components/blocks/pricing-card-02'


const plan = {
  name: 'Team',
  blurb: 'For teams building repeatable operating paths',
  price: '$29',
  yearlyPrice: '$60',
  cadence: '/month, per user',
  included: ['Unlimited workflows', '50,000 monthly actions', 'Calendar and CRM sync'],
}


<ShaderPricingCard plan={plan} billingPeriod="monthly" color={[0.17, 0.5, 1]} ctaHref="/signup" />

Install

pnpm dlx shadcn@latest add @pastaui-pro/pricing-card-02

Source

Props

Shader glow props
PropTypeDefaultDescription
planShaderPricingPlan= —Name, description, prices, cadence, and included features.
billingPeriod'monthly' | 'yearly'= monthlyShows yearlyPrice when set to yearly and a yearly price exists.
color[number, number, number]= [0.17, 0.5, 1]Glow colour as RGB values from 0 to 1.
ctaLabel / ctaHrefstring= Get started / #Button text and destination.
classNamestring= —Additional classes for the card.