Components
A comprehensive pricing comparison component that transforms your design into a fully reusable, production-ready UI component with advanced animations!
Loading preview...
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>
)
}