React Dialog Block Share Receipt

Share receipt dialog with transaction summary, copy link, and social sharing options for React payment apps

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Share payment confirmations instantly. This React share receipt dialog displays transaction details with amount, recipient, and date, plus quick sharing via link copy or social platforms. Built with shadcn/ui Dialog, Button, and Separator components using Tailwind CSS, users share payment proofs with a single tap. Copy link, share receipt, confirm transfers—perfect for payment apps, invoicing tools, expense trackers, or any Next.js application where sharing transaction records improves trust and communication.

"use client";

import { useState } from "react";
import { Share2, Copy, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";

const transaction = {
  amount: 150.0,
  to: "Alex Morgan",
  date: "Dec 10, 2024",
  id: "TXN-8294",
};

export const title = "React Dialog Block Share Receipt";

export default function DialogShareReceipt() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(`https://pay.app/receipt/${transaction.id}`);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <Share2 className="mr-2 h-4 w-4" />
            Share Receipt
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "384px" }}>
        <DialogHeader>
          <DialogTitle>Share Receipt</DialogTitle>
          <DialogDescription>Share this payment confirmation</DialogDescription>
        </DialogHeader>

        <div className="py-4">
          {/* Transaction summary */}
          <div className="rounded-md border p-4 text-center">
            <p className="text-3xl font-semibold">${transaction.amount.toFixed(2)}</p>
            <p className="text-sm text-muted-foreground mt-1">
              to {transaction.to}
            </p>
            <Separator className="my-3" />
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Date</span>
              <span>{transaction.date}</span>
            </div>
            <div className="flex justify-between text-sm mt-1">
              <span className="text-muted-foreground">ID</span>
              <span className="font-mono">{transaction.id}</span>
            </div>
          </div>

          {/* Copy link */}
          <div className="mt-4">
            <Button
              variant="outline"
              className="w-full"
              onClick={handleCopy}
            >
              {copied ? (
                <>
                  <Check className="mr-2 h-4 w-4" />
                  Copied
                </>
              ) : (
                <>
                  <Copy className="mr-2 h-4 w-4" />
                  Copy Link
                </>
              )}
            </Button>
          </div>

          {/* Share options */}
          <div className="mt-3 grid grid-cols-3 gap-2">
            <Button variant="outline" size="sm" className="text-xs">
              Message
            </Button>
            <Button variant="outline" size="sm" className="text-xs">
              Email
            </Button>
            <Button variant="outline" size="sm" className="text-xs">
              More
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { Share2, Copy, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Separator } from "@/components/ui/separator";const transaction = {  amount: 150.0,  to: "Alex Morgan",  date: "Dec 10, 2024",  id: "TXN-8294",};export const title = "React Dialog Block Share Receipt";export default function DialogShareReceipt() {  const [open, setOpen] = useState(false);  const [copied, setCopied] = useState(false);  const handleCopy = () => {    navigator.clipboard.writeText(`https://pay.app/receipt/${transaction.id}`);    setCopied(true);    setTimeout(() => setCopied(false), 2000);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Share2 className="mr-2 h-4 w-4" />            Share Receipt          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        <DialogHeader>          <DialogTitle>Share Receipt</DialogTitle>          <DialogDescription>Share this payment confirmation</DialogDescription>        </DialogHeader>        <div className="py-4">          {/* Transaction summary */}          <div className="rounded-md border p-4 text-center">            <p className="text-3xl font-semibold">${transaction.amount.toFixed(2)}</p>            <p className="text-sm text-muted-foreground mt-1">              to {transaction.to}            </p>            <Separator className="my-3" />            <div className="flex justify-between text-sm">              <span className="text-muted-foreground">Date</span>              <span>{transaction.date}</span>            </div>            <div className="flex justify-between text-sm mt-1">              <span className="text-muted-foreground">ID</span>              <span className="font-mono">{transaction.id}</span>            </div>          </div>          {/* Copy link */}          <div className="mt-4">            <Button              variant="outline"              className="w-full"              onClick={handleCopy}            >              {copied ? (                <>                  <Check className="mr-2 h-4 w-4" />                  Copied                </>              ) : (                <>                  <Copy className="mr-2 h-4 w-4" />                  Copy Link                </>              )}            </Button>          </div>          {/* Share options */}          <div className="mt-3 grid grid-cols-3 gap-2">            <Button variant="outline" size="sm" className="text-xs">              Message            </Button>            <Button variant="outline" size="sm" className="text-xs">              Email            </Button>            <Button variant="outline" size="sm" className="text-xs">              More            </Button>          </div>        </div>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-share-receipt.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-share-receipt.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-share-receipt.json

Pro block — Sign in to install

React Dialog Block Success Confirmation

Payment success

React Dialog Block Share Link

Link sharing

React Dialog Block Copy Clipboard

Copy actions

React Dialog Block Payment Method

Payments

React Dialog Block Split Bill

Bill splitting

React Dialog Block Tip Calculator

Calculations

Questions you might have

"use client"; import { useState } from "react"; import { Share2, Copy, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Separator } from "@/components/ui/separator"; const transaction = { amount: 150.0, to: "Alex Morgan", date: "Dec 10, 2024", id: "TXN-8294", }; export const title = "React Dialog Block Share Receipt"; export default function DialogShareReceipt() { const [open, setOpen] = useState(false); const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(`https://pay.app/receipt/${transaction.id}`); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <Share2 className="mr-2 h-4 w-4" /> Share Receipt </Button> </DialogTrigger> </div> <DialogContent style={{ maxWidth: "384px" }}> <DialogHeader> <DialogTitle>Share Receipt</DialogTitle> <DialogDescription>Share this payment confirmation</DialogDescription> </DialogHeader> <div className="py-4"> {/* Transaction summary */} <div className="rounded-md border p-4 text-center"> <p className="text-3xl font-semibold">${transaction.amount.toFixed(2)}</p> <p className="text-sm text-muted-foreground mt-1"> to {transaction.to} </p> <Separator className="my-3" /> <div className="flex justify-between text-sm"> <span className="text-muted-foreground">Date</span> <span>{transaction.date}</span> </div> <div className="flex justify-between text-sm mt-1"> <span className="text-muted-foreground">ID</span> <span className="font-mono">{transaction.id}</span> </div> </div> {/* Copy link */} <div className="mt-4"> <Button variant="outline" className="w-full" onClick={handleCopy} > {copied ? ( <> <Check className="mr-2 h-4 w-4" /> Copied </> ) : ( <> <Copy className="mr-2 h-4 w-4" /> Copy Link </> )} </Button> </div> {/* Share options */} <div className="mt-3 grid grid-cols-3 gap-2"> <Button variant="outline" size="sm" className="text-xs"> Message </Button> <Button variant="outline" size="sm" className="text-xs"> Email </Button> <Button variant="outline" size="sm" className="text-xs"> More </Button> </div> </div> </DialogContent> </Dialog> ); }

React Dialog Block Share Receipt

Installation

Related blocks you will also like

React Dialog Block Success Confirmation

React Dialog Block Share Link

React Dialog Block Copy Clipboard

React Dialog Block Payment Method

React Dialog Block Split Bill

React Dialog Block Tip Calculator

Questions you might have

What should receipts include?

What format for shared receipts?

How do I handle receipt privacy?

Can recipients verify receipts?

Are shared receipts legally valid?

Should I save sharing history?