---
title: Modal
description: A full-screen surface that slides up over the page.
---
import Source from './_generated/modal.mdx';

A full-screen surface for a focused, self-contained task. It slides up over the page (iOS page-sheet feel; MD3 full-screen dialog) and traps focus until dismissed. Provide your own header with a leading Close control.

<DemoFrame component="modal" height={560} />

## Installation

```bash
npx touchcn add modal
```

## Usage

<CodeGroup>

```html Angular
<tcn-modal [(open)]="open">
  <header>…leading Close control…</header>
  <div class="p-4">Content</div>
</tcn-modal>
```

```tsx React
import { TcnModal } from '@/components/ui/modal';

<TcnModal open={open} onOpenChange={setOpen} title="New Message">
  <header>…leading Close control…</header>
  <div className="p-4">Content</div>
</TcnModal>
```

```vue Vue
<script setup lang="ts">
import { TcnModal } from '@/components/ui/modal';
</script>

<template>
  <TcnModal v-model:open="open" title="New Message">
    <header>…leading Close control…</header>
    <div class="p-4">Content</div>
  </TcnModal>
</template>
```

</CodeGroup>

## Props

| Prop           | Type                      | Default   | Description                             |
| -------------- | ------------------------- | --------- | --------------------------------------- |
| `open`         | `boolean`                 | `false`   | Open state (two-way bound on Angular).  |
| `onOpenChange` | `(open: boolean) => void` | —         | Open-state callback (React).            |
| `title`        | `string`                  | `'Modal'` | Accessible label announced on open (React). |

<Source />