Overlays

Dialog.

A focused task with a clear way back.

LIVE PREVIEWTry it. It works.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/dialog.json

Registry setup · Open the playground

Usage

<Dialog trigger={<Button>New project</Button>} title="New project" description="Give the project a name.">
  <Field label="Name"><Input /></Field>
</Dialog>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Base UI supplies focus trapping, Escape dismissal and focus restoration. title is required. Supports open/onOpenChange and defaultOpen. trigger accepts a ref-forwarding React element. Use DialogClose within the content.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.