shadcn.io is not affiliated with official shadcn/ui

Shadcn Dialog for React

A modal window that appears on top of the main content.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/dialog.json

npx shadcn@latest add https://kit.dev/r/aria/dialog.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/dialog.json

yarn shadcn@latest add https://kit.dev/r/aria/dialog.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components tailwind-variants lucide-react

npm install react-aria-components tailwind-variants lucide-react

pnpm add react-aria-components tailwind-variants lucide-react

yarn add react-aria-components tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/dialog.tsx

"use client";

import { XIcon } from "lucide-react";
import type React from "react";
import {
  Dialog as DialogPrimitive,
  DialogTrigger as DialogTriggerPrimitive,
  type DialogTriggerProps,
  Heading,
  Modal,
  ModalOverlay,
  type ModalOverlayProps,
} from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Button, type ButtonProps } from "@/registry/aria/components/button";
import {
  usePreviewFrame,

Update the import paths to match your project setup.

Anatomy

DialogTrigger
DialogOverlay
DialogPositioner
DialogContent
DialogTitle
DialogDescription
DialogClose

Usage

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Dialog>
  <form>
    <DialogTrigger asChild>
      <Button variant="outline">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent className="sm:max-w-sm">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you&apos;re done.
        </DialogDescription>
      </DialogHeader>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Input defaultValue="Pedro Duarte" name="name" type="text" />
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Input defaultValue="@peduarte" name="username" type="text" />
        </Field>
      </FieldGroup>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Cancel</Button>
        </DialogClose>
        <Button type="submit">Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </form>
</Dialog>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Close Button

Replace the default close control with your own button.

PreviewCode

No Close Button

Use showCloseButton={false} to hide the close button.

PreviewCode

Sticky Footer

Keep actions visible while the content scrolls.

PreviewCode

Scrollable Content

Long content can scroll while the header stays in view.

PreviewCode

Rtl

Right-to-left dialog. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Dialog

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

size?"2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "fullscreen" | "lg" | "md" | "sm" | "xl"

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-content"

data-scope"dialog"

data-part"root"

DialogTrigger

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-trigger"

data-scope"dialog"

data-part"root"

DialogClose

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDisabled?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-close"

data-scope"dialog"

data-part"root"

DialogOverlay

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-overlay"

data-scope"dialog"

data-part"root"

DialogHeader

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

description?string

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

title?string

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-header"

data-scope"dialog"

data-part"root"

DialogTitle

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-scope"dialog"

data-part"root"

DialogDescription

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-description"

data-scope"dialog"

data-part"root"

DialogFooter

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

childrenReact.ReactNode

bottomStickOnMobile?boolean

isDismissable?boolean

isEntering?boolean

isExiting?boolean

isKeyboardDismissDisabled?boolean

isOpen?boolean

shouldCloseOnInteractOutside?(element: Element) → boolean

showCloseButton?boolean

slot?string | null

style?StyleOrFunction<T>

UNSTABLE_portalContainer?Element

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"dialog-footer"

data-scope"dialog"

data-part"root"