# V alert dialog 7

> Confirmation For Successful e-ticket Registration

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-alert-dialog-7).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-alert-dialog-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-alert-dialog-7-light-4baa9ce65c7e957d.png
- Registry item: https://ui.cnippet.dev/r/v-alert-dialog-7.json
- Categories: alert dialog
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-7.json
```

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

## Dependencies

- Registry items: `@cnippet/alert-dialog`

## Files

### `registry/default/variants/v-alert-dialog-7.tsx`

```tsx
import { CheckIcon } from "lucide-react";
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/registry/default/ui/alert-dialog";
import { Button } from "@/registry/default/ui/button";

export function Pattern() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="outline">View Confirmation</Button>}
      />
      <AlertDialogContent className="gap-8 p-0 sm:max-w-sm">
        <div className="mx-auto flex flex-col items-center justify-center gap-2 p-4">
          <div className="flex size-16 items-center justify-center rounded-full bg-info/10 text-info dark:bg-info/20">
            <CheckIcon className="size-5" />
          </div>
          <AlertDialogTitle className="text-center">
            Success! Your e-ticket is registered.
          </AlertDialogTitle>
          <AlertDialogDescription className="max-w-xs text-center">
            Please check your email for confirmation and further instructions
            about the event.
          </AlertDialogDescription>
        </div>

        <div className="m-4 grid gap-4 rounded-xl bg-muted/60 p-4">
          {[
            ["Order Number", "GBD99763JS"],
            ["Order Date", "7 September 2024"],
            ["Event Name", "Groove Beats Day Fest"],
            ["Event Date", "20/09/2024"],
            ["Register Date", "20/09/2024 | 09 PM"],
          ].map(([label, value]) => (
            <div
              className="flex items-center justify-between text-sm"
              key={label}
            >
              <span className="font-medium text-muted-foreground">{label}</span>
              <span className="font-semibold text-foreground">{value}</span>
            </div>
          ))}
        </div>

        <AlertDialogFooter>
          <AlertDialogClose
            render={<Button className="w-full sm:w-full" size="lg" />}
          >
            Back to Home
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```