Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ln-dev7/pricing-interactionimport { PricingInteraction } from "@/components/ui/pricing-interaction"
export function PricingInteractionDemo() {
return (
<PricingInteraction
starterMonth={9.99}
starterAnnual={7.49}
proMonth={19.99}
proAnnual={17.49}
/>
);
}