
```jsx
import { CModal } from '@coreui/react'
// or
import CModal from '@coreui/react/src/components/modal/CModal'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cmodal-alignment">
        <td className="text-primary fw-semibold">alignment<a href="#cmodal-alignment" aria-label="CModal alignment permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Align the modal in the center or top of the screen.</p>
        </td>
      </tr>
      <tr id="cmodal-backdrop">
        <td className="text-primary fw-semibold">backdrop<a href="#cmodal-backdrop" aria-label="CModal backdrop permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Apply a backdrop on body while modal is open.</p>
        </td>
      </tr>
      <tr id="cmodal-class-name">
        <td className="text-primary fw-semibold">className<a href="#cmodal-class-name" aria-label="CModal className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="cmodal-container">
        <td className="text-primary fw-semibold">container<a href="#cmodal-container" aria-label="CModal container permalink" className="anchor-link after">#</a><span className="badge bg-success">5.3.0+</span></td>
        <td>-</td>
        <td><code>{`Element`}</code>, <code>{`DocumentFragment`}</code>, <code>{`(() => Element | DocumentFragment)`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default <code>{`document.body`}</code>.</p>
        </td>
      </tr>
      <tr id="cmodal-focus">
        <td className="text-primary fw-semibold">focus<a href="#cmodal-focus" aria-label="CModal focus permalink" className="anchor-link after">#</a><span className="badge bg-success">4.10.0+</span></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Puts the focus on the modal when shown.</p>
        </td>
      </tr>
      <tr id="cmodal-fullscreen">
        <td className="text-primary fw-semibold">fullscreen<a href="#cmodal-fullscreen" aria-label="CModal fullscreen permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set modal to covers the entire user viewport.</p>
        </td>
      </tr>
      <tr id="cmodal-keyboard">
        <td className="text-primary fw-semibold">keyboard<a href="#cmodal-keyboard" aria-label="CModal keyboard permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Closes the modal when escape key is pressed.</p>
        </td>
      </tr>
      <tr id="cmodal-on-close">
        <td className="text-primary fw-semibold">onClose<a href="#cmodal-on-close" aria-label="CModal onClose permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be closed.</p>
        </td>
      </tr>
      <tr id="cmodal-on-close-prevented">
        <td className="text-primary fw-semibold">onClosePrevented<a href="#cmodal-on-close-prevented" aria-label="CModal onClosePrevented permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be closed.</p>
        </td>
      </tr>
      <tr id="cmodal-on-show">
        <td className="text-primary fw-semibold">onShow<a href="#cmodal-on-show" aria-label="CModal onShow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.</p>
        </td>
      </tr>
      <tr id="cmodal-portal">
        <td className="text-primary fw-semibold">portal<a href="#cmodal-portal" aria-label="CModal portal permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Generates modal using createPortal.</p>
        </td>
      </tr>
      <tr id="cmodal-scrollable">
        <td className="text-primary fw-semibold">scrollable<a href="#cmodal-scrollable" aria-label="CModal scrollable permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Create a scrollable modal that allows scrolling the modal body.</p>
        </td>
      </tr>
      <tr id="cmodal-size">
        <td className="text-primary fw-semibold">size<a href="#cmodal-size" aria-label="CModal size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size the component small, large, or extra large.</p>
        </td>
      </tr>
      <tr id="cmodal-transition">
        <td className="text-primary fw-semibold">transition<a href="#cmodal-transition" aria-label="CModal transition permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Remove animation to create modal that simply appear rather than fade in to view.</p>
        </td>
      </tr>
      <tr id="cmodal-unmount-on-close">
        <td className="text-primary fw-semibold">unmountOnClose<a href="#cmodal-unmount-on-close" aria-label="CModal unmountOnClose permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.</p>
        </td>
      </tr>
      <tr id="cmodal-visible">
        <td className="text-primary fw-semibold">visible<a href="#cmodal-visible" aria-label="CModal visible permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the visibility of modal component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
