diff --git a/app/demo/share-dialog/page.tsx b/app/demo/share-dialog/page.tsx
new file mode 100644
index 0000000..97da603
--- /dev/null
+++ b/app/demo/share-dialog/page.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ShareDialog } from "@/components/share-dialog";
+
+export default function ShareDialogDemo() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [scenario, setScenario] = useState<
+    "simple" | "with-title" | "long-key"
+  >("simple");
+
+  const scenarios = {
+    simple: {
+      url: "https://ghostpaste.dev/g/abc123#key=eyJhbGciOiJBMTI4R0NNIiwiZXhwIjoxNjg5MzM2MDAwfQ",
+      title: undefined,
+    },
+    "with-title": {
+      url: "https://ghostpaste.dev/g/def456#key=eyJhbGciOiJBMTI4R0NNIiwiZXhwIjoxNjg5MzM2MDAwfQ",
+      title: "My Configuration Files",
+    },
+    "long-key": {
+      url: "https://ghostpaste.dev/g/xyz789#key=eyJhbGciOiJBMTI4R0NNIiwiZXhwIjoxNjg5MzM2MDAwLCJpdiI6IjEyMzQ1Njc4OTBhYmNkZWYiLCJkYXRhIjoiZXlKaGJHY2lPaUZCTVRJNFIwTk5JaXdpWlhod0lqb3hOamc1TXpNMk1EQXdNSDAifQ",
+      title: "React Component Library",
+    },
+  };
+
+  const handleCopy = () => {
+    console.log("URL copied to clipboard");
+  };
+
+  const handleDownload = () => {
+    console.log("Text file downloaded");
+  };
+
+  return (
+    <div className="container mx-auto max-w-4xl p-6">
+      <div className="space-y-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            ShareDialog Demo
+          </h1>
+          <p className="text-muted-foreground mt-2">
+            Demo of the ShareDialog component with different scenarios.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Test Scenarios</h2>
+
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="space-y-2">
+              <h3 className="font-medium">Simple Gist</h3>
+              <p className="text-muted-foreground text-sm">
+                Basic gist without title
+              </p>
+              <Button
+                onClick={() => {
+                  setScenario("simple");
+                  setDialogOpen(true);
+                }}
+                className="w-full"
+              >
+                Open Dialog
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              <h3 className="font-medium">Gist with Title</h3>
+              <p className="text-muted-foreground text-sm">
+                Gist with a descriptive title
+              </p>
+              <Button
+                onClick={() => {
+                  setScenario("with-title");
+                  setDialogOpen(true);
+                }}
+                className="w-full"
+              >
+                Open Dialog
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              <h3 className="font-medium">Long Encryption Key</h3>
+              <p className="text-muted-foreground text-sm">
+                Gist with very long encryption key
+              </p>
+              <Button
+                onClick={() => {
+                  setScenario("long-key");
+                  setDialogOpen(true);
+                }}
+                className="w-full"
+              >
+                Open Dialog
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Features Demonstrated</h2>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <h3 className="font-medium">✅ Core Features</h3>
+              <ul className="text-muted-foreground space-y-1 text-sm">
+                <li>• Visual URL fragment separation</li>
+                <li>• Copy to clipboard with feedback</li>
+                <li>• Download as text file</li>
+                <li>• Security warning display</li>
+                <li>• Success animation on creation</li>
+                <li>• Mobile-friendly responsive layout</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-medium">🔒 Security Features</h3>
+              <ul className="text-muted-foreground space-y-1 text-sm">
+                <li>• Fragment key highlighting</li>
+                <li>• Clear security warnings</li>
+                <li>• Complete URL copy requirement</li>
+                <li>• No URL logging or analytics</li>
+                <li>• Fallback copy for older browsers</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Accessibility Features</h2>
+          <ul className="text-muted-foreground space-y-1 text-sm">
+            <li>• Keyboard navigation support</li>
+            <li>• Focus trap within dialog</li>
+            <li>• Escape key to close</li>
+            <li>• Screen reader friendly labels</li>
+            <li>• Auto-focus on primary action</li>
+          </ul>
+        </div>
+      </div>
+
+      <ShareDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        shareUrl={scenarios[scenario].url}
+        gistTitle={scenarios[scenario].title}
+        onCopy={handleCopy}
+        onDownload={handleDownload}
+      />
+    </div>
+  );
+}
diff --git a/components/share-dialog.test.tsx b/components/share-dialog.test.tsx
new file mode 100644
index 0000000..bae17e3
--- /dev/null
+++ b/components/share-dialog.test.tsx
@@ -0,0 +1,263 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ShareDialog } from "./share-dialog";
+
+// Mock clipboard API
+const mockWriteText = vi.fn();
+Object.defineProperty(global.navigator, "clipboard", {
+  value: { writeText: mockWriteText },
+  writable: true,
+  configurable: true,
+});
+
+// Mock document.execCommand for fallback
+Object.defineProperty(document, "execCommand", {
+  value: vi.fn(() => true),
+  writable: true,
+  configurable: true,
+});
+
+// Mock URL.createObjectURL and revokeObjectURL
+Object.defineProperty(global.URL, "createObjectURL", {
+  value: vi.fn(() => "mock-blob-url"),
+  writable: true,
+});
+
+Object.defineProperty(global.URL, "revokeObjectURL", {
+  value: vi.fn(),
+  writable: true,
+});
+
+describe("ShareDialog", () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: vi.fn(),
+    shareUrl: "https://ghostpaste.dev/g/abc123#key=eyJhbGciOiJBMTI4R0NNIn0",
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Clear any existing timeouts
+    vi.clearAllTimers();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  });
+
+  it("renders when open", () => {
+    render(<ShareDialog {...defaultProps} />);
+
+    expect(screen.getByText("Gist Created Successfully!")).toBeInTheDocument();
+    expect(screen.getByText("Your secure link:")).toBeInTheDocument();
+  });
+
+  it("does not render when closed", () => {
+    render(<ShareDialog {...defaultProps} open={false} />);
+
+    expect(
+      screen.queryByText("Gist Created Successfully!")
+    ).not.toBeInTheDocument();
+  });
+
+  it("displays URL with fragment separation", () => {
+    render(<ShareDialog {...defaultProps} />);
+
+    // Base URL should be visible
+    expect(
+      screen.getByText("https://ghostpaste.dev/g/abc123")
+    ).toBeInTheDocument();
+    // Fragment should be visible with special styling
+    expect(
+      screen.getByText("#key=eyJhbGciOiJBMTI4R0NNIn0")
+    ).toBeInTheDocument();
+  });
+
+  it("displays security warning", () => {
+    render(<ShareDialog {...defaultProps} />);
+
+    expect(screen.getByText("Important Security Notice")).toBeInTheDocument();
+    expect(screen.getByText(/The blue part after/)).toBeInTheDocument();
+    expect(screen.getByText(/complete URL/)).toBeInTheDocument();
+  });
+
+  it("calls copy function when copy button is clicked", () => {
+    mockWriteText.mockResolvedValue(undefined);
+    const onCopy = vi.fn();
+
+    render(<ShareDialog {...defaultProps} onCopy={onCopy} />);
+
+    const copyButton = screen.getByLabelText("Copy URL to clipboard");
+    fireEvent.click(copyButton);
+
+    expect(mockWriteText).toHaveBeenCalledWith(defaultProps.shareUrl);
+  });
+
+  it("shows copy button initially", () => {
+    render(<ShareDialog {...defaultProps} />);
+
+    expect(screen.getByText("Copy Link")).toBeInTheDocument();
+  });
+
+  it("attempts fallback when clipboard API fails", () => {
+    mockWriteText.mockRejectedValue(new Error("Clipboard not available"));
+
+    render(<ShareDialog {...defaultProps} />);
+
+    const copyButton = screen.getByLabelText("Copy URL to clipboard");
+    fireEvent.click(copyButton);
+
+    // Should attempt the clipboard API first
+    expect(mockWriteText).toHaveBeenCalledWith(defaultProps.shareUrl);
+  });
+
+  it("downloads text file when download button is clicked", () => {
+    const onDownload = vi.fn();
+    const createElementSpy = vi.spyOn(document, "createElement");
+    const appendChildSpy = vi.spyOn(document.body, "appendChild");
+    const removeChildSpy = vi.spyOn(document.body, "removeChild");
+
+    render(<ShareDialog {...defaultProps} onDownload={onDownload} />);
+
+    const downloadButton = screen.getByText("Download as Text");
+    fireEvent.click(downloadButton);
+
+    expect(createElementSpy).toHaveBeenCalledWith("a");
+    expect(appendChildSpy).toHaveBeenCalled();
+    expect(removeChildSpy).toHaveBeenCalled();
+    expect(onDownload).toHaveBeenCalled();
+    expect(global.URL.createObjectURL).toHaveBeenCalled();
+    expect(global.URL.revokeObjectURL).toHaveBeenCalled();
+  });
+
+  it("includes gist title in download content when provided", () => {
+    const gistTitle = "My Test Gist";
+    let blobContent = "";
+
+    // Mock Blob to capture content
+    const originalBlob = global.Blob;
+    global.Blob = vi.fn().mockImplementation((content) => {
+      blobContent = content[0];
+      return new originalBlob(content);
+    }) as unknown as typeof Blob;
+
+    render(<ShareDialog {...defaultProps} gistTitle={gistTitle} />);
+
+    const downloadButton = screen.getByText("Download as Text");
+    fireEvent.click(downloadButton);
+
+    expect(blobContent).toContain(`Title: ${gistTitle}`);
+    expect(blobContent).toContain(defaultProps.shareUrl);
+    expect(blobContent).toContain(
+      "IMPORTANT: This URL contains a decryption key"
+    );
+
+    // Restore original Blob
+    global.Blob = originalBlob;
+  });
+
+  it("calls onOpenChange when dialog is closed", () => {
+    const onOpenChange = vi.fn();
+
+    render(<ShareDialog {...defaultProps} onOpenChange={onOpenChange} />);
+
+    const doneButton = screen.getByText("Done");
+    fireEvent.click(doneButton);
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("handles URLs without fragments", () => {
+    const urlWithoutFragment = "https://ghostpaste.dev/g/abc123";
+
+    render(<ShareDialog {...defaultProps} shareUrl={urlWithoutFragment} />);
+
+    expect(
+      screen.getByText("https://ghostpaste.dev/g/abc123")
+    ).toBeInTheDocument();
+    // Should not render any blue fragment text (the # in security warning doesn't count)
+    expect(screen.queryByText(/^#key=/)).not.toBeInTheDocument();
+  });
+
+  it("has proper accessibility attributes", () => {
+    render(<ShareDialog {...defaultProps} />);
+
+    // Dialog should have proper ARIA attributes
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+
+    // Copy button should have aria-label
+    const copyButton = screen.getByLabelText("Copy URL to clipboard");
+    expect(copyButton).toBeInTheDocument();
+
+    // Close button should have screen reader text
+    expect(screen.getByText("Close")).toBeInTheDocument();
+  });
+
+  it("has copy button that can be clicked", () => {
+    mockWriteText.mockResolvedValue(undefined);
+
+    render(<ShareDialog {...defaultProps} />);
+
+    const copyButton = screen.getByLabelText("Copy URL to clipboard");
+    expect(copyButton).toBeEnabled();
+  });
+
+  it("formats download filename correctly with title", () => {
+    let downloadAttribute = "";
+
+    // Mock anchor element creation
+    const originalCreateElement = document.createElement;
+    vi.spyOn(document, "createElement").mockImplementation((tagName) => {
+      if (tagName === "a") {
+        const element = originalCreateElement.call(document, tagName);
+        Object.defineProperty(element, "download", {
+          set: (value) => {
+            downloadAttribute = value;
+          },
+          get: () => downloadAttribute,
+          configurable: true,
+        });
+        return element;
+      }
+      return originalCreateElement.call(document, tagName);
+    });
+
+    render(<ShareDialog {...defaultProps} gistTitle="My Test @ Gist!" />);
+
+    const downloadButton = screen.getByText("Download as Text");
+    fireEvent.click(downloadButton);
+
+    expect(downloadAttribute).toBe("ghostpaste-My-Test---Gist-.txt");
+  });
+
+  it("uses default filename when no title provided", () => {
+    let downloadAttribute = "";
+
+    // Mock anchor element creation
+    const originalCreateElement = document.createElement;
+    vi.spyOn(document, "createElement").mockImplementation((tagName) => {
+      if (tagName === "a") {
+        const element = originalCreateElement.call(document, tagName);
+        Object.defineProperty(element, "download", {
+          set: (value) => {
+            downloadAttribute = value;
+          },
+          get: () => downloadAttribute,
+          configurable: true,
+        });
+        return element;
+      }
+      return originalCreateElement.call(document, tagName);
+    });
+
+    render(<ShareDialog {...defaultProps} />);
+
+    const downloadButton = screen.getByText("Download as Text");
+    fireEvent.click(downloadButton);
+
+    expect(downloadAttribute).toBe("ghostpaste-gist.txt");
+  });
+});
diff --git a/components/share-dialog.tsx b/components/share-dialog.tsx
new file mode 100644
index 0000000..1067d4c
--- /dev/null
+++ b/components/share-dialog.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Check, Copy, Download, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface ShareDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when dialog open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** The complete shareable URL including fragment */
+  shareUrl: string;
+  /** Optional title for the gist */
+  gistTitle?: string;
+  /** Optional callback when URL is copied */
+  onCopy?: () => void;
+  /** Optional callback when text file is downloaded */
+  onDownload?: () => void;
+}
+
+export function ShareDialog({
+  open,
+  onOpenChange,
+  shareUrl,
+  gistTitle,
+  onCopy,
+  onDownload,
+}: ShareDialogProps) {
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  // Split the URL at the fragment for visual display
+  const urlParts = shareUrl.split("#");
+  const baseUrl = urlParts[0];
+  const fragment = urlParts[1] ? `#${urlParts[1]}` : "";
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopySuccess(true);
+      onCopy?.();
+
+      // Reset success state after 2 seconds
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy URL:", error);
+      // Fallback for older browsers
+      fallbackCopy();
+    }
+  };
+
+  const fallbackCopy = () => {
+    const textArea = document.createElement("textarea");
+    textArea.value = shareUrl;
+    textArea.style.position = "absolute";
+    textArea.style.left = "-999999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    try {
+      document.execCommand("copy");
+      setCopySuccess(true);
+      onCopy?.();
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (error) {
+      console.error("Fallback copy failed:", error);
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  };
+
+  const handleDownload = () => {
+    const content = `GhostPaste - Secure Gist\n\n${gistTitle ? `Title: ${gistTitle}\n` : ""}URL: ${shareUrl}\n\nIMPORTANT: This URL contains a decryption key in the fragment (after #).\nShare the complete URL to allow others to view the gist.\n\nCreated: ${new Date().toLocaleString()}`;
+
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `ghostpaste-${gistTitle ? gistTitle.replace(/[^a-zA-Z0-9]/g, "-") : "gist"}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    onDownload?.();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+              <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
+            </div>
+            Gist Created Successfully!
+          </DialogTitle>
+          <DialogDescription>
+            Your gist has been created and encrypted. Share the link below to
+            give others access.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* URL Display */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Your secure link:</label>
+            <div className="relative">
+              <div className="bg-muted/50 rounded-md border p-3 pr-12 font-mono text-sm">
+                <div className="break-all">
+                  <span className="text-foreground">{baseUrl}</span>
+                  {fragment && (
+                    <span className="font-semibold text-blue-600 dark:text-blue-400">
+                      {fragment}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                className="absolute top-2 right-2 h-7 w-7 p-0"
+                onClick={handleCopy}
+                disabled={copySuccess}
+                aria-label="Copy URL to clipboard"
+              >
+                {copySuccess ? (
+                  <Check className="h-3 w-3 text-green-600" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Security Warning */}
+          <div className="rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-950/20">
+            <div className="flex gap-2">
+              <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                  Important Security Notice
+                </p>
+                <p className="text-xs leading-relaxed text-amber-700 dark:text-amber-300">
+                  The blue part after{" "}
+                  <code className="rounded bg-amber-100 px-1 dark:bg-amber-900/50">
+                    #
+                  </code>{" "}
+                  is your decryption key. Share the{" "}
+                  <strong>complete URL</strong> to allow others to view your
+                  gist. Anyone with this link can access your content.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex-col gap-2 sm:flex-row">
+          <Button
+            variant="outline"
+            onClick={handleDownload}
+            className="w-full sm:w-auto"
+          >
+            <Download className="mr-2 h-4 w-4" />
+            Download as Text
+          </Button>
+          <Button
+            onClick={handleCopy}
+            disabled={copySuccess}
+            className={cn(
+              "w-full sm:w-auto",
+              copySuccess && "bg-green-600 hover:bg-green-600"
+            )}
+          >
+            {copySuccess ? (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                Copied!
+              </>
+            ) : (
+              <>
+                <Copy className="mr-2 h-4 w-4" />
+                Copy Link
+              </>
+            )}
+          </Button>
+          <DialogClose asChild>
+            <Button variant="secondary" className="w-full sm:w-auto">
+              Done
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..584f7c7
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};