All components
Dialog
Modal windows with backdrop, positioner, and content slots in six widths.
Sizes
xs
sm
md
lg
xl
Install
zsh — dialog
1bunx stylexblocks add dialogUsage — Base UI
dialog.tsx
123456789101112131415161718192021222324252627282930import { Dialog } from "#components/ui/base-ui/dialog.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // size/placement/scrollBehavior resolve once on Root; every part // inherits them via context. Popup renders the centering positioner // around Base UI's popup inside the portal. <Dialog.Root size="md" placement="top"> <Dialog.Trigger render={<Button variant="surface" />}> Open dialog </Dialog.Trigger> <Dialog.Portal> <Dialog.Backdrop /> <Dialog.Popup> <Dialog.Header> <Dialog.Title>Delete project</Dialog.Title> </Dialog.Header> <Dialog.Body> <Dialog.Description>This action cannot be undone.</Dialog.Description> </Dialog.Body> <Dialog.Footer> <Button variant="solid">Delete</Button> </Dialog.Footer> <Dialog.Close aria-label="Close">×</Dialog.Close> </Dialog.Popup> </Dialog.Portal> </Dialog.Root> );}