Dialog & Drawer
Dialog displays centered modal content with overlay. Drawer slides a panel from any edge of the screen. Both trap focus, support ESC to close, and animate with Framer Motion.
Live Preview
Open a dialog and switch between sizes interactively.
Installation
Install the component library package.
$ pnpm add @aidash/componentsImport
Import the Dialog and Drawer components.
import { Dialog, Drawer } from '@aidash/components';Basic Dialog
A simple dialog with a title, description, and content.
<Dialog
open={open}
onClose={() => setOpen(false)}
title="Welcome"
description="Thanks for trying out the Dialog component."
>
<p>Dialog body content goes here.</p>
</Dialog>Dialog Sizes
Choose from sm, md, lg, and xl width presets.
Dialog with Form
Use a dialog to collect user input with a form.
<Dialog open={open} onClose={close} title="New Project" size="md">
<form onSubmit={handleSubmit} className="space-y-4">
<input type="text" placeholder="Project Name" />
<textarea placeholder="Description" />
<div className="flex justify-end gap-3">
<Button variant="ghost" onClick={close}>Cancel</Button>
<Button type="submit">Create</Button>
</div>
</form>
</Dialog>Confirmation Dialog
A pattern for destructive action confirmation.
Drawer - Basic
A panel that slides in from the right side.
<Drawer
open={open}
onClose={() => setOpen(false)}
title="Details"
size={360}
>
<p>Drawer body content goes here.</p>
</Drawer>Drawer - Positions
Slide a drawer from any edge: left, right, top, or bottom.
Drawer - Navigation
Use a drawer as a side navigation panel.
Accessibility
Built-in accessibility features for Dialog and Drawer.
Focus Trap
Focus is trapped inside the dialog/drawer when open. Tab and Shift+Tab cycle through focusable elements. Focus returns to the trigger on close.
Escape to Close
Press the Escape key to close the dialog or drawer. Can be disabled with closeOnEscape={false}.
Overlay Click
Click the backdrop overlay to close. Can be disabled with closeOnOverlay={false} for confirmation dialogs.
ARIA Attributes
Includes role="dialog", aria-modal="true", aria-labelledby for the title, and aria-describedby for the description.
Scroll Lock
Body scroll is locked when a dialog or drawer is open to prevent background scrolling.
DialogProps
All available props for the Dialog component.
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | -- | Whether the dialog is visible |
| onClose* | () => void | -- | Callback when the dialog requests to close |
| title | string | -- | Heading rendered in the dialog header |
| description | string | -- | Subtitle text below the title |
| children* | ReactNode | -- | Main body content of the dialog |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Width preset for the dialog panel |
| closeOnOverlay | boolean | true | Close when clicking the backdrop overlay |
| closeOnEscape | boolean | true | Close when pressing the Escape key |
| showClose | boolean | true | Show the X close button in the header |
| className | string | '' | Additional CSS classes on the panel |
DrawerProps
All available props for the Drawer component.
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | -- | Whether the drawer is visible |
| onClose* | () => void | -- | Callback when the drawer requests to close |
| position | 'left' | 'right' | 'top' | 'bottom' | 'right' | Side from which the drawer slides in |
| title | string | -- | Heading rendered in the drawer header |
| children* | ReactNode | -- | Main body content of the drawer |
| size | number | string | 320 | Width (left/right) or height (top/bottom) |
| showClose | boolean | true | Show the X close button in the header |
| className | string | '' | Additional CSS classes on the panel |
| closeOnOverlay | boolean | true | Close when clicking the backdrop overlay |
| closeOnEscape | boolean | true | Close when pressing the Escape key |
Related
Other components that work well alongside Dialog.