Live CortexUI Surface
This block renders live CortexUI contract metadata in the docs DOM so AI View can inspect real machine-readable elements instead of only code examples.
AI View can now inspect a live status region, form fields, actions, and table entities on every docs page.
| Item | State |
|---|---|
| Search docs | Ready |
| Inspect metadata | Visible in AI View |
Modal
A full overlay dialog for complex interactions.
Overview
Modal displays content in an overlay layer. Unlike ConfirmDialog which is purpose-built for confirmation flows, Modal is general-purpose for complex UIs like forms, image viewers, or detail views.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | required | Controls visibility |
| onClose | () => void | required | Close callback |
| title | string | required | Dialog title |
| children | ReactNode | required | Content |
| size | 'sm' | 'md' | 'lg' | 'full' | 'md' | Dialog size |
AI Contract
<div
data-ai-role="modal"
data-ai-id="create-user-modal"
data-ai-state="expanded"
>
<button
data-ai-role="action"
data-ai-id="close-create-user-modal"
data-ai-action="close-modal"
data-ai-state="idle"
aria-label="Close"
>×</button>
<!-- Modal content: forms, tables, etc. with their own contracts -->
<form data-ai-role="form" data-ai-id="create-user-form">
...
</form>
</div>
ℹ
Note
Modals can contain any CortexUI components inside. Their nested data-ai-* attributes are fully functional. A form inside a modal exposes its schema via getFormSchema() normally.
Accessibility
role="dialog"witharia-modal="true"andaria-labelledby- Focus trapped inside
- ESC key closes
- Focus returns to trigger on close
- Overlay click closes (configurable)