# Dashboard dialog 02

> A confirmation dialog for critical actions with clear warning message, action confirmation buttons, and user avatar display for personalization.

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/dashboard-dialog-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/dashboard-dialog-02-light-e34b4fe8906c8fe0.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/dashboard-dialog-02.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-02.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-02/page.tsx`

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

import ConfirmationDialog from '@/registry/new-york/components/blocks/dashboard-dialog-02/dialog-confirmation'

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

export default DialogPage
```

### `src/registry/new-york/components/blocks/dashboard-dialog-02/dialog-confirmation.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,
  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 ConfirmationDialog = ({ 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 bg-transparent p-2'>
            <AvatarFallback>
              <div className='bg-muted text-foreground flex items-center justify-center'>
                <CheckIcon className='size-7' />
              </div>
            </AvatarFallback>
          </Avatar>
          <div className='space-y-3.5 text-center'>
            <DialogTitle className='leading-7'>Congratulations!</DialogTitle>
            <DialogDescription className='max-w-sm'>
              You have successfully subscribed! 🎉 You will never miss our updates, latest news, and exclusive offers.
            </DialogDescription>
          </div>
        </DialogHeader>

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

        <DialogFooter className='flex-row justify-center!'>
          <Button size='lg'>Subscribe</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export default ConfirmationDialog
```