║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Dialog description: A popup that opens on top of the entire page.

links: doc: https://base-ui.com/react/components/dialog#api-reference

<ComponentPreview name="dialog-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/dialog

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dialog" title="components/ui/dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import {
  Dialog,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogPopup>
</Dialog>

Examples

Open from a Menu

<ComponentPreview name="dialog-from-menu" />

Nested Dialogs

<ComponentPreview name="dialog-nested" />

Close Confirmation

<ComponentPreview name="dialog-close-confirmation" />

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Quick Checklist

• Replace asChild → render on DialogTrigger and closing buttons
• Prefer DialogPopup; DialogContent remains for legacy
• If you used asChild on any other parts, switch to the render prop

Comparison Example

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:asChild] <Dialog> <DialogTrigger asChild> <Button variant="outline">Show Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> <DialogDescription>Dialog Description</DialogDescription> </DialogHeader> <DialogFooter> <DialogClose asChild> <Button variant="ghost">Cancel</Button> </DialogClose> </DialogFooter> </DialogContent> </Dialog> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:render] <Dialog> <DialogTrigger render={<Button variant="outline" />}> Show Dialog </DialogTrigger> <DialogPopup> <DialogHeader> <DialogTitle>Dialog Title</DialogTitle> <DialogDescription>Dialog Description</DialogDescription> </DialogHeader> <DialogFooter> <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose> </DialogFooter> </DialogPopup> </Dialog> ``` </span>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║