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/radix/dialog.json

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

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

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

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

Install the following dependencies:

bun add radix-ui tailwind-variants lucide-react

npm install radix-ui tailwind-variants lucide-react

pnpm add radix-ui tailwind-variants lucide-react

yarn add radix-ui 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 { Dialog as DialogPrimitive } from "radix-ui";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/radix/components/button";
import {
  usePreviewFrame,
  usePreviewPortal,
} from "@/registry/react/lib/preview-frame";

export const Dialog = (
  props: React.ComponentProps<typeof DialogPrimitive.Root>
) => <DialogPrimitive.Root data-slot="dialog" {...props} />;

export const DialogTrigger = (

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

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

asChild?boolean

AttributeType

data-slot"dialog"

data-scope"dialog"

data-part"root"

DialogTrigger

button

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

asChild?boolean

AttributeType

data-slot"dialog-trigger"

data-scope"dialog"

data-part"trigger"

DialogTitle

h2

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"dialog-title"

data-scope"dialog"

data-part"title"

DialogDescription

div

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"dialog-description"

data-scope"dialog"

data-part"description"

DialogPortal

PropType

openboolean): void

children?React.ReactNode

container?PortalProps["container"]

defaultOpen?boolean

forceMount?true

modal?boolean

asChild?boolean

AttributeType

data-slot"dialog-portal"

data-scope"dialog"

data-part"portal"

DialogClose

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

asChild?boolean

AttributeType

data-slot"dialog-close"

data-scope"dialog"

data-part"close"

DialogOverlay

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

forceMount?true

modal?boolean

asChild?boolean

className?string

AttributeType

data-slot"dialog-overlay"

data-scope"dialog"

data-part"overlay"

DialogContent

PropType

openboolean): void

bottomStickOnMobile?boolean

children?React.ReactNode

defaultOpen?boolean

modal?boolean

showCloseButton?boolean

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

asChild?boolean

className?string

AttributeType

data-slot"dialog-content"

data-scope"dialog"

data-part"root"

DialogHeader

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

description?string

modal?boolean

title?string

asChild?boolean

className?string

AttributeType

data-slot"dialog-header"

data-scope"dialog"

data-part"root"

DialogFooter

PropType

openboolean): void

children?React.ReactNode

defaultOpen?boolean

modal?boolean

showCloseButton?boolean

asChild?boolean

className?string

AttributeType

data-slot"dialog-footer"

data-scope"dialog"

data-part"root"