Dialog

A dialog that is used to display a message to the user. It is used to display information and let the user interact with the content.

React
"use client"

import Dialog from "@radui/ui/Dialog";
import { X } from "lucide-react";

const DialogExample = () => {
  return (
    <div className="w-64 md:w-96 flex justify-center items-center">
      <Dialog.Root>
        <Dialog.Trigger>
          Open Dialog
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Overlay />
          <Dialog.Content>
            <Dialog.Title>
              This message will self destruct in 10 seconds
            </Dialog.Title>
            <Dialog.Description>
              Just kidding, it will not self destruct.
            </Dialog.Description>
            <Dialog.Close>
              <CloseIcon />
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>)
}

const CloseIcon = ()=> <X size={15} strokeWidth={2} />

export default DialogExample;

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Dialog from "@radui/ui/Dialog";

export default () => {
    return (
        <Dialog.Root>
            <Dialog.Trigger>Open dialog</Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Overlay/>
                <Dialog.Content>
                    <Dialog.Title>Dialog title</Dialog.Title>
                    <Dialog.Description>Dialog description</Dialog.Description>
                    <Dialog.Footer>
                        <Dialog.Close>Close</Dialog.Close>
                    </Dialog.Footer>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    )
}

Root

The root component for the Dialog.

Prop	Type	Default
className	string	--
customRootClass	string	--
open	boolean	--
children	ReactNode	--
defaultOpen	n/a	--
onOpenChange	function	--
onClickOutside	function	--

Trigger

The trigger component for the Dialog.

Prop	Type	Default
className	string	--
asChild	boolean	false

Portal

The portal component for the Dialog.

Prop	Type	Default
children	ReactNode	--
container	Element \| null	--
forceMount	boolean	false
keepMounted	boolean	false

Overlay

The overlay component for the Dialog.

Prop	Type	Default
className	string	''
asChild	boolean	false
forceMount	boolean	false

Content

The content component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--
asChild	boolean	false
forceMount	boolean	false

Title

The title component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--

Description

The description component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--

A layout container for dialog actions.

Prop	Type	Default
className	string	''

Close

The close component for the Dialog.

Prop	Type	Default
className	string	''
children	ReactNode	--
asChild	boolean	false