---
description: Display a modal within your application.
links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Modal.vue
  - label: 'Dialog'
    icon: i-simple-icons-headlessui
    to: 'https://headlessui.com/vue/dialog'
---

## Usage

Use a `v-model` to control the Modal state.

::component-example
#default
:modal-example-basic

#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen">
      <!-- Content -->
    </UModal>
  </div>
</template>
```
::

You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:

::component-example
#default
:modal-example-card

#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen">
      <UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <!-- Content -->
        </template>

        <!-- Content -->

        <template #footer>
          <!-- Content -->
        </template>
      </UCard>
    </UModal>
  </div>
</template>
```
::

### Disable overlay

Set the `overlay` prop to `false` to disable it.

::component-example
#default
:modal-example-disable-overlay

#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" :overlay="false">
      <div class="p-4">
        <Placeholder class="h-48" />
      </div>
    </UModal>
  </div>
</template>
```
::

### Disable transition

Set the `transition` prop to `false` to disable it.

::component-example
#default
:modal-example-disable-transition

#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" :transition="false">
      <div class="p-4">
        <Placeholder class="h-48" />
      </div>
    </UModal>
  </div>
</template>
```
::

### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}

Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.

::component-example
#default
:modal-example-prevent-close

#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" prevent-close>
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Modal
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <Placeholder class="h-32" />
      </UCard>
    </UModal>
  </div>
</template>
```
::

You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.

```vue
<script setup>
const isOpen = ref(false)

defineShortcuts({
  escape: {
    usingInput: true,
    whenever: [isOpen],
    handler: () => { isOpen.value = false }
  }
})
</script>
```

## Props

:component-props

## Preset

:component-preset