Feedback & Overlays
Modals, slideout panels, and notification dropdowns for presenting contextual information, forms, and alerts.
Modal & Dialog
Modals use the DialogTrigger -> ModalOverlay -> Modal -> Dialog compound pattern from React Aria.
Warning Modal
Success Modal
Destructive Modal
| Prop | Type | Default | Description |
|---|---|---|---|
DialogTrigger | Component | - | Wrapper that connects trigger button to modal overlay |
ModalOverlay | Component | - | Semi-transparent backdrop overlay |
Modal | Component | - | Centered modal container. Use className for max-width. |
Dialog | Component | - | Dialog content wrapper with focus management |
Slideout Menu
Slideout panels slide in from the right edge. Uses DialogTrigger pattern with SlideoutMenu.Trigger.
Basic Slideout
Upload Slideout
| Prop | Type | Default | Description |
|---|---|---|---|
SlideoutMenu.Trigger | Component | - | DialogTrigger wrapper -- contains both the trigger button AND the SlideoutMenu |
SlideoutMenu | Component | - | Panel container. Children receive render props: { close } |
SlideoutMenu.Header | Component | - | Header with onClose callback for close button |
SlideoutMenu.Content | Component | - | Scrollable content area |
SlideoutMenu.Footer | Component | - | Fixed footer for actions |
dialogClassName | string | - | Custom class for the dialog element |
Notification Dropdown
A custom dropdown component showing notification items with unread indicators. Built with the Dropdown compound component.
Live Example
Click the bell icon to open notifications:
Pattern Description
Implementation Pattern
- Uses Dropdown.Root with a custom AriaButton trigger (Bell icon)
- Dropdown.Popover with fixed width (w-80)
- Custom header with "Mark all as read" action
- Dropdown.Menu with Dropdown.Item using unstyled prop for custom layout
- Unread indicator dot using absolute positioning