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.

"use client"

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

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 = ()=>{
  return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
}

export default DialogExample;

Import all parts of the component and piece them together

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

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

The root component for the Dialog.

PropTypeDefault

className

string--

customRootClass

string--

open

boolean

false

onOpenChange

function--

onClickOutside

function--

The trigger component for the Dialog.

PropTypeDefault

className

string--

asChild

boolean

false

The portal component for the Dialog.

PropTypeDefault

children

ReactNode--

The overlay component for the Dialog.

PropTypeDefault

className

Content

The content component for the Dialog.

PropTypeDefault

className

children

ReactNode--

The title component for the Dialog.

PropTypeDefault

className

children

ReactNode--

The description component for the Dialog.

PropTypeDefault

className

children

ReactNode--

The close component for the Dialog.

PropTypeDefault

className

children

ReactNode--

asChild

boolean

false

Edit this page on GitHub