Pricing Section

Per-seat pricing with a team size slider linked to a number box, a monthly and yearly switch that shows real savings, per-person prices with team totals, and a bar on phones for changing team size. Light and dark mode.

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.

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

export default function Demo() {
    return (
        <div className="flex min-h-screen items-center bg-background">
            <PricingSection />
        </div>
    );
}