---
title: "Modal"
description: "A centered dialog over a dimmed overlay that closes on Escape, overlay click or an explicit close control."
---

A centred dialog with a header, a body and a footer. It is the settings-panel shape from the client, so a form inside it looks like it belongs there.

_Live example of Modal — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add modal
``` Registry dependencies, installed with it: button.

Files written — React: components/ui/modal.tsx. Vue: components/ui/modal/Modal.vue, components/ui/modal/ModalHeader.vue, components/ui/modal/ModalBody.vue, components/ui/modal/ModalFooter.vue, components/ui/modal/ModalClose.vue, components/ui/modal/index.ts.

## Usage

React:

```tsx
import { Modal } from "@/components/ui/modal"
```

Vue:

```ts
import { Modal, ModalHeader, ModalBody, ModalFooter, ModalClose } from "@/components/ui/modal"
```

## API reference

**`Modal`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Whether the dialog is shown. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the dialog asks to close — the backdrop, the close button, or Escape. |

**`ModalHeader`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | The title. Becomes the dialog's accessible name. |

**`ModalFooter`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Actions, laid out end-aligned. |

Every part also accepts the native attributes of the element it renders, and a `className` that is merged rather than replaced.

## Accessibility

The dialog carries `role="dialog"` and `aria-modal="true"`, traps focus while it is open, returns focus to whatever opened it, and closes on `Escape`. The content behind it is inert. Give `ModalHeader` real text: it is what a screen reader announces when the dialog opens.

## Tokens

Modal reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.