Pricing Interaction

A reusable pricing selector component that supports three plans (Free, Starter, Pro) with toggles between monthly and annual pricing, and highlights the selected plan dynamically.

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

import { PricingInteraction } from "@/components/ui/pricing-interaction"

export function PricingInteractionDemo() {
  return (
      <PricingInteraction
        starterMonth={9.99}
        starterAnnual={7.49}
        proMonth={19.99}
        proAnnual={17.49}
      />
  );
}