Shadcn.io is not affiliated with official shadcn/ui
Banner Stacked Referral Invite
A stacked centered referral banner for React and Next.js with a rounded icon container, muted badge, title and description stack, and a compact primary share button built with shadcn/ui and Tailwind CSS
Promote an invite-a-friend flow with this stacked centered banner for React and Next.js. Features a size-10 rounded icon container, a muted Referral badge, a tight title and description stack constrained to max-w-xs, and a compact primary share button at h-8 chrome scale. Built with TypeScript, Lucide React icons, motion/react subtle entrance animation, and Tailwind CSS theme variables. Perfect for affiliate dashboards, ambassador programs, growth surfaces, and any moment where a short promotional card should sit quietly above or below a settings panel.
Related Components
React Stacked Centered Banner Block
Stacked centered promotional card
React Stacked Download Card Banner Block
Stacked download promo card
React Stacked Activity Proof Banner Block
Stacked activity social proof card
React Reading Progress Metric Banner Block
Inline reading progress metric
React Split Dual Actions Banner Block
Two-tone split dual action banner
React Minimalist Social Links Banner Block
Minimalist social links line
FAQ
Was this page helpful?
Sign in to leave feedback.
Stacked Partner Logo
A stacked centered banner for React and Next.js with a partner logo mark, eyebrow badge, short title, and compact call to action built with shadcn/ui and Tailwind CSS
Stacked Testimonial
A stacked testimonial banner for React and Next.js with a centered quote icon container, short attributed quote, inline avatar with name, and subtle arrow link action built with shadcn/ui and Tailwind CSS