# Dialog (/popups/dialog)





<ComponentPreview name="dialog-preskok-demo" description="A basic dialog with title, description and close action." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/dialog
```

## Usage [#usage]

```tsx
import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/preskok-ui/dialog"

export function Example() {
  return (
    <DialogTrigger>
      <button>Open dialog</button>
      <Dialog>
        <DialogHeader title="Dialog title" description="Optional description" />
        <DialogBody>Content</DialogBody>
        <DialogFooter>
          <button slot="close">Close</button>
        </DialogFooter>
      </Dialog>
    </DialogTrigger>
  )
}
```

## Components [#components]

* **Dialog**: root
* **DialogTrigger**, **DialogHeader**, **DialogBody**, **DialogFooter**