Dialog

A modal dialog component for displaying focused content that requires user interaction. Built on Radix UI Dialog for accessible keyboard navigation and focus trapping. Ideal for confirmations, settings forms, and kernel selection.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/dialog.json

Install the dependencies:

npm install radix-ui lucide-react

Copy from the nteract/elements registry.

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from "@/registry/primitives/dialog"

export function Example() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog description text.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button>Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Examples

Basic Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Show Details</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Cell Details</DialogTitle>
      <DialogDescription>
        Information about this cell and its execution history.
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-2 py-4">
      <div className="flex justify-between">
        <span>Cell ID:</span>
        <span>abc-123</span>
      </div>
    </div>
  </DialogContent>
</Dialog>

Confirmation Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete Notebook</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete Notebook?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Form Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Rename Notebook</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename Notebook</DialogTitle>
      <DialogDescription>
        Enter a new name for your notebook.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4">
      <Input placeholder="Untitled.ipynb" />
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Notebook Examples

Kernel Selection

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Select Kernel</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Select Kernel</DialogTitle>
      <DialogDescription>Choose a kernel for this notebook.</DialogDescription>
    </DialogHeader>
    <div className="grid gap-2 py-4">
      {kernels.map((kernel) => (
        <KernelOption key={kernel.name} kernel={kernel} />
      ))}
    </div>
  </DialogContent>
</Dialog>

Components

Component	Description
`Dialog`	Root component managing open state
`DialogTrigger`	Element that opens the dialog
`DialogContent`	Modal container with overlay
`DialogHeader`	Container for title and description
`DialogFooter`	Container for action buttons
`DialogTitle`	Accessible title element
`DialogDescription`	Accessible description element
`DialogClose`	Element that closes the dialog
`DialogPortal`	Portal for rendering outside DOM hierarchy
`DialogOverlay`	Background overlay

Props

Dialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`modal`	`boolean`	`true`	Whether to render as modal

DialogContent

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Show the close button in top-right
`className`	`string`	—	Additional CSS classes

DialogFooter

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Add a close button to footer
`className`	`string`	—	Additional CSS classes

DialogTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Dialog

On this page