Pricing Table

Pricing 426

About

A feature comparison pricing table component with animated pricing, interval switching, and plan selection. Features - Animated price transitions with NumberFlow - Monthly/Yearly interval toggle - Interactive plan selection - Feature comparison matrix - Responsive design - Dark mode support - Popular plan highlighting - Customizable styling

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

Code

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

Usage.tsx

import { PricingTable } from "@/components/blocks/pricing-table";

const features = [
    { name: "Basic Analytics", included: "starter" },
    { name: "Up to 5 team members", included: "starter" },
    { name: "Basic support", included: "starter" },
    { name: "Advanced Analytics", included: "pro" },
    { name: "Up to 20 team members", included: "pro" },
    { name: "Priority support", included: "pro" },
    { name: "Custom integrations", included: "all" },
    { name: "Unlimited team members", included: "all" },
    { name: "24/7 phone support", included: "all" },
];

const plans = [
    {
        name: "Starter",
        price: { monthly: 15, yearly: 144 },
        level: "starter",
    },
    {
        name: "Pro",
        price: { monthly: 49, yearly: 470 },
        level: "pro",
        popular: true,
    },
    {
        name: "Enterprise",
        price: { monthly: 99, yearly: 990 },
        level: "all",
    },
];

function PricingTableDemo() {
    return (
        <PricingTable
            features={features}
            plans={plans}
            defaultPlan="pro"
            defaultInterval="monthly"
            onPlanSelect={(plan) => console.log("Selected plan:", plan)}
            containerClassName="py-12"
            buttonClassName="bg-primary hover:bg-primary/90"
        />
    );
}

export { PricingTableDemo }