React Dialog Block Referral Invite

Referral program dialog with unique invite code, social sharing buttons, email invite form, rewards display, and referral stats

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Grow through word of mouth. This React referral dialog enables users to share invite codes via copyable link, social media buttons, and direct email invites while displaying reward tiers and referral statistics. Built with shadcn/ui Dialog, Input, Button, Badge, and Separator components using Tailwind CSS, users spread the word with frictionless sharing and clear incentive visibility. Copy link, social share, email invite—perfect for SaaS products, marketplace apps, subscription services, or any Next.js application where referral programs drive viral growth and customer acquisition.

"use client";

import { useState } from "react";
import { Gift, Copy, Check, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const REFERRAL_LINK = "https://app.example.com/signup?ref=FRIEND2024";

export const title = "React Dialog Block Referral Invite";

export default function DialogReferralInvite() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const [email, setEmail] = useState("");
  const [emailSent, setEmailSent] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(REFERRAL_LINK);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleSendEmail = () => {
    if (!email) return;
    setEmailSent(true);
    setTimeout(() => {
      setEmailSent(false);
      setEmail("");
    }, 2000);
  };

  const isValidEmail = email.includes("@") && email.includes(".");

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <Gift className="mr-2 h-4 w-4" />
            Invite Friends
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Invite Friends</DialogTitle>
          <DialogDescription>
            Give friends $10 off and earn $10 for each signup.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label>Your referral link</Label>
            <div className="flex gap-2">
              <Input
                value={REFERRAL_LINK}
                readOnly
                className="text-sm"
              />
              <Button
                variant="outline"
                size="icon"
                onClick={handleCopy}
                className="shrink-0"
              >
                {copied ? (
                  <Check className="h-4 w-4 text-primary" />
                ) : (
                  <Copy className="h-4 w-4" />
                )}
              </Button>
            </div>
          </div>

          <div className="space-y-2">
            <Label>Or invite by email</Label>
            <div className="flex gap-2">
              <Input
                type="email"
                placeholder="[email protected]"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <Button
                onClick={handleSendEmail}
                disabled={!isValidEmail || emailSent}
                className="shrink-0"
              >
                {emailSent ? (
                  <Check className="h-4 w-4" />
                ) : (
                  <Send className="h-4 w-4" />
                )}
              </Button>
            </div>
            {emailSent && (
              <p className="text-xs text-primary">Invite sent!</p>
            )}
          </div>

          <div className="flex items-center justify-between rounded-lg border p-3">
            <div>
              <p className="text-sm font-medium">3 friends joined</p>
              <p className="text-xs text-muted-foreground">$30 earned so far</p>
            </div>
            <Button variant="ghost" size="sm" className="text-xs">
              View all
            </Button>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Done
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { Gift, Copy, Check, Send } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";const REFERRAL_LINK = "https://app.example.com/signup?ref=FRIEND2024";export const title = "React Dialog Block Referral Invite";export default function DialogReferralInvite() {  const [open, setOpen] = useState(false);  const [copied, setCopied] = useState(false);  const [email, setEmail] = useState("");  const [emailSent, setEmailSent] = useState(false);  const handleCopy = () => {    navigator.clipboard.writeText(REFERRAL_LINK);    setCopied(true);    setTimeout(() => setCopied(false), 2000);  };  const handleSendEmail = () => {    if (!email) return;    setEmailSent(true);    setTimeout(() => {      setEmailSent(false);      setEmail("");    }, 2000);  };  const isValidEmail = email.includes("@") && email.includes(".");  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Gift className="mr-2 h-4 w-4" />            Invite Friends          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Invite Friends</DialogTitle>          <DialogDescription>            Give friends $10 off and earn $10 for each signup.          </DialogDescription>        </DialogHeader>        <div className="space-y-4 py-4">          <div className="space-y-2">            <Label>Your referral link</Label>            <div className="flex gap-2">              <Input                value={REFERRAL_LINK}                readOnly                className="text-sm"              />              <Button                variant="outline"                size="icon"                onClick={handleCopy}                className="shrink-0"              >                {copied ? (                  <Check className="h-4 w-4 text-primary" />                ) : (                  <Copy className="h-4 w-4" />                )}              </Button>            </div>          </div>          <div className="space-y-2">            <Label>Or invite by email</Label>            <div className="flex gap-2">              <Input                type="email"                placeholder="[email protected]"                value={email}                onChange={(e) => setEmail(e.target.value)}              />              <Button                onClick={handleSendEmail}                disabled={!isValidEmail || emailSent}                className="shrink-0"              >                {emailSent ? (                  <Check className="h-4 w-4" />                ) : (                  <Send className="h-4 w-4" />                )}              </Button>            </div>            {emailSent && (              <p className="text-xs text-primary">Invite sent!</p>            )}          </div>          <div className="flex items-center justify-between rounded-lg border p-3">            <div>              <p className="text-sm font-medium">3 friends joined</p>              <p className="text-xs text-muted-foreground">$30 earned so far</p>            </div>            <Button variant="ghost" size="sm" className="text-xs">              View all            </Button>          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Done          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-referral-invite.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-referral-invite.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-referral-invite.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-referral-invite.json

Pro block — Sign in to install

React Dialog Block Share Link

Link sharing interface

React Dialog Block Invite Members

Team invitations

React Dialog Block Gift Card

Reward gifting

React Dialog Block Success Confirmation

Invite sent confirmation

React Dialog Block Contact Card

Contact sharing

React Dialog Block Upgrade Plan

Reward redemption

Questions you might have

"use client"; import { useState } from "react"; import { Gift, Copy, Check, Send } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; const REFERRAL_LINK = "https://app.example.com/signup?ref=FRIEND2024"; export const title = "React Dialog Block Referral Invite"; export default function DialogReferralInvite() { const [open, setOpen] = useState(false); const [copied, setCopied] = useState(false); const [email, setEmail] = useState(""); const [emailSent, setEmailSent] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(REFERRAL_LINK); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const handleSendEmail = () => { if (!email) return; setEmailSent(true); setTimeout(() => { setEmailSent(false); setEmail(""); }, 2000); }; const isValidEmail = email.includes("@") && email.includes("."); return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <Gift className="mr-2 h-4 w-4" /> Invite Friends </Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-sm"> <DialogHeader> <DialogTitle>Invite Friends</DialogTitle> <DialogDescription> Give friends $10 off and earn $10 for each signup. </DialogDescription> </DialogHeader> <div className="space-y-4 py-4"> <div className="space-y-2"> <Label>Your referral link</Label> <div className="flex gap-2"> <Input value={REFERRAL_LINK} readOnly className="text-sm" /> <Button variant="outline" size="icon" onClick={handleCopy} className="shrink-0" > {copied ? ( <Check className="h-4 w-4 text-primary" /> ) : ( <Copy className="h-4 w-4" /> )} </Button> </div> </div> <div className="space-y-2"> <Label>Or invite by email</Label> <div className="flex gap-2"> <Input type="email" placeholder="[email protected]" value={email} onChange={(e) => setEmail(e.target.value)} /> <Button onClick={handleSendEmail} disabled={!isValidEmail || emailSent} className="shrink-0" > {emailSent ? ( <Check className="h-4 w-4" /> ) : ( <Send className="h-4 w-4" /> )} </Button> </div> {emailSent && ( <p className="text-xs text-primary">Invite sent!</p> )} </div> <div className="flex items-center justify-between rounded-lg border p-3"> <div> <p className="text-sm font-medium">3 friends joined</p> <p className="text-xs text-muted-foreground">$30 earned so far</p> </div> <Button variant="ghost" size="sm" className="text-xs"> View all </Button> </div> </div> <DialogFooter> <Button variant="outline" onClick={() => setOpen(false)}> Done </Button> </DialogFooter> </DialogContent> </Dialog> ); }

React Dialog Block Referral Invite

Installation

Related blocks you will also like

React Dialog Block Share Link

React Dialog Block Invite Members

React Dialog Block Gift Card

React Dialog Block Success Confirmation

React Dialog Block Contact Card

React Dialog Block Upgrade Plan

Questions you might have

What rewards work best for referrals?

How do I track referral attribution?

What sharing options should I include?

How should referral messaging work?

How do I prevent referral fraud?

Should I gamify the referral program?