# antuikit / Modal

> Modal. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/modal

## Install

npx antuikit@latest init
npx antuikit@latest add modal

## Import

import { Modal } from "@/components/ui/modal";

## Demos

- [Basic](https://ui.antuikit.com/embed/modal/basic.md): Hold `open` in state and set it back to `false` in `onOk` and `onCancel`, since the dialog never closes itself.
- [Width and centering](https://ui.antuikit.com/embed/modal/width-centered.md): Set `width` to size the dialog and `centered` to place it in the middle of the viewport instead of near the top.
- [Top offset](https://ui.antuikit.com/embed/modal/top-offset.md): Pass `style` a `top` value to move the dialog up or down from where it opens near the top of the viewport.
- [Full screen](https://ui.antuikit.com/embed/modal/full-screen.md): Set `width` to `"100vw"`, zero the top offset in `style` and give `styles.body` a height to fill the whole viewport.
- [Custom footer](https://ui.antuikit.com/embed/modal/footer.md): Pass `footer` a node to replace the Cancel and OK buttons, like a seat count beside a single Send invites button.
- [No footer](https://ui.antuikit.com/embed/modal/no-footer.md): Set `footer` to `null` to remove the button row, for a dialog people read and then close with the close button or Escape.
- [Button text](https://ui.antuikit.com/embed/modal/button-text.md): Set `okText` and `cancelText` to name the buttons after the action, like Publish and Not yet instead of OK and Cancel.
- [Footer render](https://ui.antuikit.com/embed/modal/footer-render.md): Pass `footer` a function to get the stock `OkBtn` and `CancelBtn` and add your own button beside them, like Save a copy.
- [Custom close icon](https://ui.antuikit.com/embed/modal/custom-close-icon.md): Pass `closeIcon` a node to replace the close glyph, like the `close` icon from your installed icon pack.
- [Without a close button](https://ui.antuikit.com/embed/modal/not-closable.md): Set `closable` to `false` to hide the close button in the corner, while Escape, the mask and Cancel still close the dialog.
- [Mask](https://ui.antuikit.com/embed/modal/mask.md): Set `mask` to `false` to remove it, `{ blur: true }` to blur the page behind, or `{ closable: false }` so a click on it does not close the dialog.
- [Scrollable body](https://ui.antuikit.com/embed/modal/scrollable-body.md): Give `styles.body` a `maxHeight` and `overflowY: "auto"` so long content scrolls inside the body while the title and buttons stay in view.
- [Loading](https://ui.antuikit.com/embed/modal/loading.md): Set `loading` to show a skeleton in place of the body and hide the footer while the dialog waits for its content.
- [Async close](https://ui.antuikit.com/embed/modal/async-close.md): Set `confirmLoading` while your request runs to show a spinner on OK, then close the dialog once the request finishes.
- [Destroy on hidden](https://ui.antuikit.com/embed/modal/destroy-on-hidden.md): Set `destroyOnHidden` to unmount the content when the dialog closes, so text typed into the field is gone the next time it opens.
- [Confirm and status dialogs](https://ui.antuikit.com/embed/modal/confirm-statics.md): Call `modal.confirm`, `info`, `success`, `error` or `warning` from `App.useApp()` to open a themed dialog with a single function call.
- [Close all dialogs](https://ui.antuikit.com/embed/modal/destroy-all.md): Call `Modal.destroyAll()` to close every dialog opened with a function call at once, like a stack of three confirms.
- [useModal hook](https://ui.antuikit.com/embed/modal/hooks.md): Call `Modal.useModal()` to hold the dialog context yourself: render its `contextHolder`, then `await` a confirm to get the answer.
- [Update and destroy](https://ui.antuikit.com/embed/modal/instance-update.md): Keep the handle a call like `modal.success` returns and use its `update` and `destroy` to change or close the open dialog, like a countdown.
- [Form dialog](https://ui.antuikit.com/embed/modal/modal-render.md): Pass `modalRender` to wrap the whole dialog in an element, like a `<form>` so Enter in the field and the OK button both submit it.
- [classNames and styles](https://ui.antuikit.com/embed/modal/styled-parts.md): Pass `classNames` or `styles` to style one part of the dialog, like `header` and `footer` for a tinted band and `title` for the heading.
- [Delete repository](https://ui.antuikit.com/embed/modal/delete-repository.md): A delete confirmation whose danger button stays disabled until you type the repository's name, the way GitHub guards a repository delete.
- [What's new](https://ui.antuikit.com/embed/modal/whats-new.md): A release announcement with a photo carousel on top, a short list of new features with icons and a single Got it button.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/modal`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Modal` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.