Pricing Section

Pricing

About

A clean, modern pricing section designed for SaaS and digital products, featuring a clear comparison between plans, a highlighted popular option, and a custom quote callout. The layout emphasizes readability, trust, and conversion with well-structured cards, concise feature lists, and strong call-to-action buttons.

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

Code

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

Usage.tsx

import { Pricing } from "@/components/ui/pricing-section";

export default function PricingDemo() {
    return (
        <Pricing
            sectionTag="Pricing"
            mainHeading="Affordable Pricing"
            sectionDescription="Our pricing plans are designed to provide you with the tools, insights, and support needed to drive your sales success."
            plans={[
                {
                    name: "Basic",
                    subtitle: "Starting from",
                    monthlyPrice: 1499,
                    yearlyPrice: 1199,
                    billingPeriod: "month",
                    description: "Working closely with you to develop.",
                    features: [
                        { text: "Customized Sales Strategy", iconType: "strategy" },
                        { text: "Lead Generation Framework", iconType: "leads" },
                        { text: "Sales Process Audit", iconType: "audit" },
                        { text: "Monthly Performance Review", iconType: "performance" },
                        { text: "CRM Integration & Automation", iconType: "automation" },
                        { text: "Intensive Sales Training Program", iconType: "training" },
                    ],
                    ctaText: "Get Started Now",
                    isPopular: false,
                },
                {
                    name: "Professional",
                    subtitle: "Starting from",
                    monthlyPrice: 2999,
                    yearlyPrice: 2399,
                    billingPeriod: "month",
                    description: "Working closely with you to develop.",
                    features: [
                        { text: "Customized Sales Strategy", iconType: "strategy" },
                        { text: "Lead Generation Framework", iconType: "leads" },
                        { text: "Sales Process Audit", iconType: "audit" },
                        { text: "Monthly Performance Review", iconType: "performance" },
                        { text: "CRM Integration & Automation", iconType: "automation" },
                        { text: "Intensive Sales Training Program", iconType: "training" },
                    ],
                    ctaText: "Get Started Now",
                    isPopular: true,
                    badgeText: "Popular",
                },
            ]}
            customQuote={{
                title: "Reach out for a custom quote.",
                description:
                    "Tailored for large organizations needing a fully customized, end-to-end sales solution.",
                ctaText: "Contact Sales",
            }}
            onPlanSelect={(planName) => console.log(`Selected plan: ${planName}`)}
            onCustomQuote={() => console.log("Custom quote requested")}
        />
    );
}