Craft Dot UI - Beautiful React Components

Installation

npx shadcn@latest add @craftdotui/baseui-dialog

Anatomy

Composite

<DialogRoot>
    <DialogTrigger>Open Dialog</DialogTrigger>

    <DialogContent showCloseButton>
        <DialogHeader>
            <DialogTitle>Dialog Title</DialogTitle>
            <DialogDescription>Dialog Description</DialogDescription>
        </DialogHeader>

        <DialogPanel>Content</DialogPanel>

        <DialogFooter>
            <DialogClose>Close</DialogClose>
        </DialogFooter>
    </DialogContent>
</DialogRoot>

Primitives

<DialogRoot>
    <DialogTrigger>Open Dialog</DialogTrigger>

    <DialogPortal>
        <DialogBackdrop />
        <DialogViewport>
            <DialogPopup>
                <DialogClose />

                <DialogHeader>
                    <DialogTitle>Dialog Title</DialogTitle>
                    <DialogDescription>Dialog Description</DialogDescription>
                </DialogHeader>

                <DialogPanel>Content</DialogPanel>

                <DialogFooter>
                    <DialogClose>Close</DialogClose>
                </DialogFooter>
            </DialogPopup>
        </DialogViewport>
    </DialogPortal>
</DialogRoot>

Demo

Controlled

Inside Scroll

Outside Scroll

Detached Triggers

Nested Dialogs

Custom Focus Management

When the dialog opens, it auto-focuses the input instead of the first button. On dismiss, focus returns specifically to the Return Target button.

Dialog

Installation

Anatomy

Composite

Primitives

Demo

Controlled

Inside Scroll

Outside Scroll

Detached Triggers

Nested Dialogs

Custom Focus Management

Close Confirmation

Open from Menu