# Modal dialogs

> Confirmation dialog without a close icon showing a receipt icon in a circle, a Transfer Slip Uploaded title, a short explanation and a single rounded button that closes it.

A shadcn/ui block from the [@shadcnuikit](https://shadcnuikit.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnuikit/dashboard-modal12).

- Page, with a live preview: https://shadcn.exchange/r/shadcnuikit/dashboard-modal12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnuikit/dashboard-modal12-light-0a940bacf2fb47e7.png
- Registry item: https://shadcnuikit.com/r/dashboard-modal12.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnuikit.com/r/dashboard-modal12.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `dialog`

## Files

### `contents/blocks/dashboard-ui/modal-dialogs/16/index.tsx`

```tsx
"use client";

import * as React from "react";
import { ReceiptTextIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export default function ReceiptUploadedDialog() {
  const [open, setOpen] = React.useState(true);

  return (
    <div className="flex h-screen w-full items-center justify-center px-4">
      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <Button variant="outline">Send my receipt</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-md" showCloseButton={false}>
            <div className="flex flex-col items-center gap-4 py-4 text-center">
              <span className="bg-muted flex size-14 items-center justify-center rounded-full">
                <ReceiptTextIcon
                  className="size-6 text-green-600 dark:text-green-400"
                  aria-hidden="true"
                />
              </span>

              <DialogHeader className="items-center gap-2">
                <DialogTitle className="text-lg">
                  Transfer Slip Uploaded
                </DialogTitle>
                <DialogDescription className="max-w-xs">
                  We have received your transfer slip! Course access will unlock
                  once our team confirms the payment.
                </DialogDescription>
              </DialogHeader>

              <Button
                className="mt-2 rounded-full px-8"
                onClick={() => setOpen(false)}
              >
                Great, Thanks!
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
}
```