Shadcn.io is not affiliated with official shadcn/ui
React Referral Code Entry Onboarding Block
A React onboarding referral code entry with code input, apply button, animated discount reveal using Framer Motion AnimatePresence, and continue action built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS
Apply referral discounts during onboarding with this referral code entry block built with React, Next.js, and TypeScript. Features a shadcn/ui Input field for entering referral codes with uppercase formatting, an apply button that validates the code, and an animated discount reveal using Framer Motion AnimatePresence showing a 10% discount with an emerald success indicator. Includes a continue-without-code ghost button for users without a referral code. Built with staggered entrance animations and Tailwind CSS responsive styling. Perfect for referral program onboarding, promotional code entry, and discount activation flows in React applications.
React Referral Code Entry Onboarding Block preview
Installation
Related Components
Invite Link Onboarding
Shareable invite link with copy action
Plan Selection Onboarding
Pricing plan selection step
Billing Setup Onboarding
Payment method configuration step
Welcome Onboarding
Welcome greeting with feature highlights
Trial Countdown Onboarding
Free trial information with countdown
Onboarding Completion
Completion celebration screen
FAQ
Was this page helpful?
Sign in to leave feedback.
React API Rate Limit Configuration Onboarding Block
A React onboarding API rate limit configuration with requests per minute selector, usage progress bar, overage handling, and apply action built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS
React Report Schedule Configuration Onboarding Block
A React onboarding scheduled report configuration with frequency select, day-of-week picker, time select, email recipients list, and schedule action built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS