Shadcn.io is not affiliated with official shadcn/ui
Pricing Referral Discount
A single highlighted plan pricing section for React and Next.js with a referral hero card showing 3 months free, NumberFlow animated savings, friend referrer name and avatar, bidirectional benefit breakdown, ShadcnioButton claim CTA, and a small comparison strip linking to other plans built with shadcn/ui Avatar and Tailwind CSS
Convert referred visitors with a focused single-plan spotlight using this referral discount pricing section for React and Next.js. Features a centered marketing headline naming the friend who referred you with avatar, a single hero bg-muted card containing the Pro plan with crossed-out original price, a NumberFlow animated free-months counter, total savings display, a bidirectional referrer-and-referee benefit breakdown with checkmarks, a prominent ShadcnioButton claim CTA, and a compact horizontal strip below linking to Starter and Business plans for users who want comparison context. Built with TypeScript, ShadcnioButton, NumberFlow, shadcn/ui Avatar components, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for referral program landing pages, viral growth loops, friend-invite experiences, and personalized signup flows.
Related Components
Three Column Pricing
Classic three-tier pricing cards
Featured Plan Pricing
Single highlighted plan spotlight
Money Back Hero Pricing
Money-back guarantee hero plan
Seasonal Sale Pricing
Seasonal sale discount pricing
Countdown Offer Pricing
Time-limited promotional offer
Commitment Discount Pricing
Reward for longer commitment
FAQ
Was this page helpful?
Sign in to leave feedback.
Rate Matrix
A wide rate matrix table pricing section for React and Next.js with shadcn Table layout, per-cell NumberFlow animated unit rates, column plan headers with base prices, included allocation above each rate, semantic row grouping for metrics features and support, a sticky ring-highlighted recommended column, and ShadcnioButton CTAs in the footer row built with shadcn/ui Table Tooltip and Tailwind CSS
Region Pricing
A region-based pricing section for React and Next.js with tabbed region selector for Americas, Europe, and Asia-Pacific showing local currency NumberFlow animated prices, region-specific compliance features, and three plan cards per region with PillTabs navigation, ShadcnioButton CTAs, emerald checkmarks, and red Best Value badge built with shadcn/ui and Tailwind CSS