Dialog
A modal dialog built on Radix UI's Dialog primitive, with an accessible overlay, close button, header, footer, and portal rendering.
Install
npx shadcn@latest add https://atomx.acau.net/r/dialog.jsonUsage
Wrap a trigger element in DialogTrigger and provide DialogContent with the modal body. Use DialogHeader, DialogTitle, and DialogDescription to structure the header, and DialogFooter for action buttons. DialogContent renders in a portal on top of a full-screen overlay.
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>Preview
Props
Dialog extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial state when uncontrolled. |
onOpenChange | (open: boolean) => void | Fired when open state changes. |
DialogContent extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>.
| Prop | Type | Notes |
|---|---|---|
className | string | Use to override max-width or padding. |
DialogHeader and DialogFooter are plain div wrappers. DialogTitle and DialogDescription are Radix primitives with consistent typography styles.
Date Picker
A controlled single-date picker — atomx ships it as a block composing Popover, Calendar, and Button so you get a consistent API instead of wiring the primitives together yourself.
Direction
Provides reading-direction (LTR/RTL) context to Radix-based atomx components, built on Radix UI's DirectionProvider.