A comprehensive pricing section component featuring four customizable pricing tiers with support for monthly/annual billing toggles, credit selection dropdowns, feature lists with checkmarks and info icons, and an optional student discount banner. Perfect for SaaS products, subscription services, and tiered product offerings. Fully theme-compatible and responsive.
import { Pricing } from "@/components/ui/pricing-table"
export default function PricingDemo() {
const gradientHeartIcon = (
<div className="w-12 h-12 relative">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
<defs>
<linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#ff6b35" />
<stop offset="100%" stopColor="#f72585" />
</linearGradient>
</defs>
<path
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
fill="url(#heartGradient)"
/>
</svg>
</div>
)
return (
<Pricing
icon={gradientHeartIcon}
title="Pricing"
subtitle="Start for free. Upgrade to get the capacity that exactly matches your team's needs."
tiers={[
{
name: "Free",
description: "Discover what Lovable can do for you",
price: 0,
billingPeriod: "per month",
buttonText: "Get Started",
features: [
{ text: "5 daily credits (up to 30/month)" },
{ text: "Public projects" },
{ text: "Unlimited collaborators" },
],
featuresTitle: "Free for everyone",
},
{
name: "Pro",
description: "Designed for fast-moving teams building together in real time.",
price: 25,
billingPeriod: "per month",
buttonText: "Get Started",
isPrimary: true,
hasAnnualToggle: true,
creditOptions: ["100 credits / month", "200 credits / month", "500 credits / month"],
defaultCredits: "100 credits / month",
featuresTitle: "Everything in Free, plus:",
features: [
{ text: "100 monthly credits", hasInfo: true },
{ text: "5 daily credits (up to 150/month)" },
{ text: "Credit rollovers", hasInfo: true },
{ text: "Custom domains" },
{ text: "Remove the Lovable badge" },
{ text: "Private projects" },
{ text: "User roles & permissions" },
],
},
{
name: "Business",
description: "Advanced controls and power features for growing departments",
price: 50,
billingPeriod: "per month",
buttonText: "Get Started",
hasAnnualToggle: true,
creditOptions: ["100 credits / month", "200 credits / month", "500 credits / month"],
defaultCredits: "100 credits / month",
featuresTitle: "All features in Pro, plus:",
features: [
{ text: "100 monthly credits", hasInfo: true },
{ text: "SSO" },
{ text: "Personal Projects" },
{ text: "Opt out of data training" },
{ text: "Design templates" },
],
},
{
name: "Enterprise",
description: "Built for large orgs needing flexibility, scale, and governance.",
priceLabel: "Flexible billing",
buttonText: "Book a demo",
featuresTitle: "Everything in Business, plus:",
features: [
{ text: "Dedicated support" },
{ text: "Onboarding services" },
{ text: "Custom connections" },
{ text: "Group-based access control" },
{ text: "Custom design systems" },
],
},
]}
footerTitle="Student discount"
footerDescription="Verify student status and get access to up to 50% off Lovable Pro."
footerButtonText="Learn more"
/>
)
}