Animated Glassy Pricing

Pricing 912

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Glassy Pricing to your project and fits it to your theme.

Code

How Animated Glassy Pricing is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ModernPricingPage, PricingCardProps  } from "@/components/ui/animated-glassy-pricing";

const myPricingPlans: PricingCardProps[] = [
  { 
    planName: 'Basic', 
    description: 'Perfect for personal projects and hobbyists.', 
    price: '0', 
    features: ['1 User', '1GB Storage', 'Community Forum'], 
    buttonText: 'Get Started', 
    buttonVariant: 'secondary'
  },
  { 
    planName: 'Team', 
    description: 'Collaborate with your team on multiple projects.', 
    price: '49', 
    features: ['10 Users', '100GB Storage', 'Email Support', 'Shared Workspaces'], 
    buttonText: 'Choose Team Plan', 
    isPopular: true, 
    buttonVariant: 'primary' 
  },
  { 
    planName: 'Agency', 
    description: 'Manage all your clients under one roof.', 
    price: '149', 
    features: ['Unlimited Users', '1TB Storage', 'Dedicated Support', 'Client Invoicing'], 
    buttonText: 'Contact Us', 
    buttonVariant: 'primary' 
  },
];

const Default = () => {
  return <ModernPricingPage
        title={
          <>
            Find the <span className="text-cyan-400">Perfect Plan</span> for Your Business
          </>
        }
        subtitle="Start for free, then grow with us. Flexible plans for projects of all sizes."
        plans={myPricingPlans}
        showAnimatedBackground={true}
      />
;
};

export { Default };