# Dashboard dialog 21

> Payment success confirmation dialog with green check avatar, success message, and primary CTA to continue to dashboard.

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/dashboard-dialog-21
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/dashboard-dialog-21-light-653cbfe1d51d6d6f.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/dashboard-dialog-21.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/dashboard-dialog-21.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: `avatar`, `button`, `dialog`, `utils`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/dashboard-dialog/dashboard-dialog-21/page.tsx`

```tsx
import { Button } from '@/registry/new-york/ui/button'

import SuccessfulDialog from '@/registry/new-york/components/blocks/dashboard-dialog-21/dialog-successful'

const DialogPage = () => {
  return (
    <div className='flex h-dvh items-start justify-center p-8'>
      <SuccessfulDialog
        defaultOpen
        trigger={
          <Button variant='outline'>
            <span>Payment </span>
          </Button>
        }
      />
    </div>
  )
}

export default DialogPage
```

### `src/registry/new-york/components/blocks/dashboard-dialog-21/dialog-successful.tsx`

```tsx
'use client'

import { useState, type ReactNode } from 'react'

import { CheckIcon } from 'lucide-react'

import { Avatar, AvatarFallback } from '@/registry/new-york/ui/avatar'
import { Button } from '@/registry/new-york/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@/registry/new-york/ui/dialog'

import { cn } from '@/registry/new-york/lib/utils'

type Props = {
  trigger: ReactNode
  defaultOpen?: boolean
  className?: string
}

const SuccessfulDialog = ({ defaultOpen = false, trigger, className }: Props) => {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild onClick={() => setOpen(true)}>
        {trigger}
      </DialogTrigger>
      <DialogContent className={cn('sm:max-w-145 [&>[data-slot=dialog-close]>svg]:size-5', className)}>
        <DialogHeader className='items-center gap-4'>
          <Avatar className='size-15 border border-green-600 bg-green-600/10 p-2 dark:border-green-400 dark:bg-green-400/10'>
            <AvatarFallback className='bg-transparent'>
              <div className='flex items-center justify-center'>
                <CheckIcon className='size-7 text-green-600 dark:text-green-400' />
              </div>
            </AvatarFallback>
          </Avatar>
          <div className='space-y-3.5 text-center'>
            <DialogTitle className='leading-7'>Payment Successful</DialogTitle>
            <DialogDescription className='max-w-sm'>
              Your payment was successful 🎉 A confirmation email with your purchase details will be sent to you
              shortly.
            </DialogDescription>
          </div>
        </DialogHeader>

        <p className='text-center font-medium'>Thank you for joining our community!</p>

        <DialogFooter className='flex-row justify-center!'>
          <DialogClose asChild>
            <Button size='lg'>Go to Dashboard</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export default SuccessfulDialog
```