---
title: Dialog
description: Display focused content in an accessible modal
type: reference
summary: Compose Dialog primitives for modal search, chat, forms, and confirmations.
related:
  - /docs/components
  - /docs/components/button
  - /docs/components/popover
---

import { DialogDemo } from "@/components/geistdocs/dialog-demo";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <DialogDemo />
</div>

```tsx
"use client";

import {
  Dialog,
  DialogAction,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@vercel/geistdocs/components/dialog";
import { useState } from "react";

export function SearchDialog() {
  const [active, setActive] = useState(false);

  return (
    <>
      <button onClick={() => setActive(true)}>Search</button>
      <Dialog
        active={active}
        drawer={false}
        onClickOutside={() => setActive(false)}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Search documentation</DialogTitle>
            <DialogDescription>Type a query to find a page.</DialogDescription>
          </DialogHeader>
          {/* Search input and results */}
        </DialogContent>
        <DialogFooter>
          <DialogClose
            onClick={() => setActive(false)}
            variant="secondary"
          >
            Cancel
          </DialogClose>
          <DialogAction onClick={() => setActive(false)}>Search</DialogAction>
        </DialogFooter>
      </Dialog>
    </>
  );
}
```

`Dialog` is controlled through `active` and `onClickOutside`. Set `drawer={false}` for a centered dialog on every viewport, or omit it to allow mobile drawer behavior where supported.

Always provide a `DialogTitle` and `DialogDescription`. `DialogAction` and `DialogClose` render action buttons; call your close-state setter from `DialogClose.onClick`.

Import these components from `@vercel/geistdocs/components/dialog`. The public package provides a compatible implementation, while the private package aliases Geistcn's official Modal components under the same `Dialog*` names.