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

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

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

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

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

Install the following dependencies:

bun add @base-ui/react tailwind-variants lucide-react

npm install @base-ui/react tailwind-variants lucide-react

pnpm add @base-ui/react tailwind-variants lucide-react

yarn add @base-ui/react tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/dialog.tsx

"use client";

import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import { XIcon } from "lucide-react";
import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/base/components/button";
import {
  usePreviewFrame,
  usePreviewPortal,
} from "@/registry/react/lib/preview-frame";

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

export const DialogTrigger = (props: DialogPrimitive.Trigger.Props) => (

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

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: DialogRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<DialogRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

defaultTriggerId?string | null

disablePointerDismissal?boolean

handle?DialogHandle<Payload>

onOpenChangeComplete?(open: boolean) → void

triggerId?string | null

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dialog"

data-scope"dialog"

data-part"root"

DialogTrigger

button

PropType

handle?DialogHandle<Payload>

id?string

payload?Payload

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dialog-trigger"

data-scope"dialog"

data-part"trigger"

DialogOverlay

div

PropType

forceRender?boolean

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-overlay"

data-scope"dialog"

data-part"backdrop"

data-state"open" | "closed"

DialogTitle

h2

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-title"

data-scope"dialog"

data-part"title"

DialogDescription

p

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-description"

data-scope"dialog"

data-part"description"

DialogPortal

div

PropType

keepMounted?boolean

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dialog-portal"

data-scope"dialog"

data-part"portal"

DialogClose

button

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dialog-close"

data-scope"dialog"

data-part"close"

DialogContent

PropType

bottomStickOnMobile?boolean

positionerClassName?string

showCloseButton?boolean

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

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-content"

data-scope"dialog"

data-part"root"

DialogHeader

PropType

description?string

title?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-header"

data-scope"dialog"

data-part"root"

DialogFooter

PropType

showCloseButton?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dialog-footer"

data-scope"dialog"

data-part"root"