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 — Ark UI
dialog.tsx
1234567891011121314151617181920212223242526272829import { Dialog } from "#components/ui/ark-ui/dialog.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // size/placement/scrollBehavior resolve once on Root; every part // inherits them via context. Backdrop and Positioner portal to <body>. <Dialog.Root size="md" placement="top"> <Dialog.Trigger asChild> <Button variant="surface">Open dialog</Button> </Dialog.Trigger> <Dialog.Backdrop /> <Dialog.Positioner> <Dialog.Content> <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.CloseTrigger aria-label="Close">×</Dialog.CloseTrigger> </Dialog.Content> </Dialog.Positioner> </Dialog.Root> );}