Components

Dialog

Modal dialog: the page dims behind a blurred overlay while the panel breathes in from 96% scale with a slight upward drift.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add dialog

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Dialog } from "@lumora/ui/components/dialog";
// or from the barrel:
import { Dialog } from "@lumora/ui";

Props worth knowing

Controlled: pass open and onOpenChange. title labels the dialog for assistive tech. Escape and overlay clicks close it; focus moves into the panel on open and returns to the trigger on close. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.