Aedis UI

Dialog

Modal dialog for forms and details. Use Alert Dialog for confirmations.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add dialog# pnpm dlx @aedis/cli@0.1.0 add dialog · yarn dlx @aedis/cli@0.1.0 add dialog · bunx @aedis/cli@0.1.0 add dialog

Props

PropTypeDefaultDescription
...props@base-ui/react Dialog props—Every prop of the underlying Base UI part, including render for composition.

Security

  • Focus is trapped while open and returns to the trigger on close.