Notification Referral
A referral accepted notification block for React and Next.js with user avatar, credit reward display, referral link with copy button, invite CTA, and program stats built with shadcn/ui and Tailwind CSS
Drive viral growth with this referral accepted notification block for React and Next.js. Features a UserPlusIcon header announcing the accepted invite, a credit reward earned indicator, a referral link display with ghost copy button, an Invite More CTA, and referral program statistics footer. Built with TypeScript, shadcn/ui Button and Badge components, Framer Motion staggered animations, react-wrap-balancer, and Tailwind CSS. Perfect for SaaS referral programs, affiliate dashboards, and invite-based growth flows.
Related Components
Achievement Notification
Achievement unlocked celebration notification
Milestone Notification
Milestone reached celebration notification
Discount Offer Notification
Promo code and discount notification
Success Toast Notification
Success toast with auto-dismiss bar
CTA Blocks
Call-to-action and conversion blocks
Account Blocks
User account and settings blocks
FAQ
Was this page helpful?
Sign in to leave feedback.
Reconnected
A connection restored notification block for React and Next.js with emerald success indicator, missed notifications count, disconnection duration, auto-dismiss timer, and view missed action built with shadcn/ui and Tailwind CSS
Reply
A reply notification block for React and Next.js with original comment preview, reply content display, thread context, and reply-back action built with shadcn/ui and Tailwind CSS