C
CortexUI

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.
AI-addressable docs entities
ItemState
Search docsReady
Inspect metadataVisible in AI View

DialogBase

A raw accessible dialog/modal primitive.

Purpose

DialogBase handles the hardest parts of modals correctly:

  • Focus trapping (Tab cycles within the dialog)
  • ESC key closing
  • aria-modal="true" and role="dialog"
  • Portal rendering (renders outside DOM hierarchy to avoid z-index issues)
  • Return focus to trigger element on close

Usage

import { DialogBase } from '@cortexui/primitives';

function CustomModal({ isOpen, onClose, title, children }) {
  return (
    <DialogBase
      isOpen={isOpen}
      onClose={onClose}
      aria-labelledby="modal-title"
      data-ai-role="modal"
      data-ai-id="custom-modal"
      data-ai-state={isOpen ? 'expanded' : 'idle'}
    >
      <h2 id="modal-title">{title}</h2>
      {children}
    </DialogBase>
  );
}

Props

PropTypeDefaultDescription
isOpenbooleanrequiredControls visibility
onClose() => voidrequiredClose callback
childrenReactNoderequiredDialog content
...restany—Any HTML dialog attribute
★
Important

Always add data-ai-role="modal" and data-ai-state="expanded" when building on DialogBase. These are not added automatically.

Accessibility

  • Focus trap: Tab and Shift+Tab cycle only within the dialog
  • ESC calls onClose
  • On mount: focuses first focusable element inside
  • On close: returns focus to the element that triggered the dialog

Related