DialogFreev1.0.0

A panel of smoked glass that rises into place while the page behind it dims and softens, and sounds once as it opens and closes. shadcn's Dialog, cut from Lumen glass.

Built on shadcn/ui

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-dialog.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-dialog.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

DialogContent showCloseButtontrue
boolean
The glass close button, top right.
DialogFooter showCloseButtonfalse
boolean
An outline Close button in the footer.
open / onOpenChange–
boolean / (open) => void
Controlled or not, as shadcn.

Anatomy

Same exports, parts and data-slots as shadcn's Dialog.
Base UI and Radix builds.
One open and one close cue per change, however it closed.

Dialogdata-slot="dialog"
Root: open state.
DialogTriggerdata-slot="dialog-trigger"
Opens it.
DialogContentdata-slot="dialog-content"
The glass panel, portalled, with the overlay.
DialogHeader / DialogTitle / DialogDescriptiondata-slot="dialog-header"
The heading.
DialogFooterdata-slot="dialog-footer"
The shelf for actions.
DialogClosedata-slot="dialog-close"
Closes it.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.0.0 · 2026-09-29All 1 entries

v1.0.0 · 2026-09-29
First release: shadcn's Dialog in Lumen Halo

Keyboard

Escape: Close
Tab: Move within the dialog

More in Overlays

Tooltip

Alert Dialog

Sheet