Pricing Page 1

Pricing

About

A comprehensive pricing comparison component that transforms your design into a fully reusable, production-ready UI component with advanced animations!

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

Code

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

Usage.tsx

import { PricingComparison } from "@/components/ui/pricing-page-1"

const DEMO_PLANS = [
  {
    id: "plus",
    name: "Plus",
    icon: "✨",
    price: 29,
    originalPrice: 34,
    billingPeriod: "month",
    description: "For growing teams",
    cta: {
      text: "Upgrade to plus",
      variant: "primary" as const,
    },
    subtitle: "Enhanced capabilities for expanding operations",
    features: [
      { name: "Enhanced email sending", included: true },
      { name: "Permission settings", included: true },
      { name: "Upgraded contact analysis", included: true },
    ],
  },
  {
    id: "pro",
    name: "Pro",
    icon: "🚀",
    price: 59,
    originalPrice: 69,
    billingPeriod: "month",
    description: "For scaling businesses",
    cta: {
      text: "Upgrade to pro",
      variant: "primary" as const,
    },
    subtitle: "Complete feature access for enterprise needs",
    features: [
      { name: "Full access permissions", included: true },
      { name: "Advanced data enrichment", included: true },
      { name: "Priority support", included: true },
    ],
    isPopular: true,
    badge: "Most popular",
  },
  {
    id: "enterprise",
    name: "Enterprise",
    icon: "👑",
    price: 119,
    billingPeriod: "month",
    description: "For large organizations",
    cta: {
      text: "Talk to sales",
      variant: "secondary" as const,
    },
    subtitle: "Dedicated support and custom solutions",
    features: [
      { name: "Unlimited reporting", included: true },
      { name: "SAML and SSO", included: true },
      { name: "Custom billing", included: true },
    ],
  },
]

export default function PricingDemoPage() {
  return (
    <main className="min-h-screen bg-background">
      <PricingComparison
        plans={DEMO_PLANS}
        billingOptions={[
          { label: "Annually", value: "annual" },
          { label: "Monthly", value: "monthly" },
        ]}
        activeBilling="annual"
      />
    </main>
  )
}