ui/docs/content/5.overlays/1.modal.md

---
github: true
headlessui:
  label: 'Dialog'
  to: 'https://headlessui.com/vue/dialog'
---

## Usage

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

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

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

    <UModal v-model="open">
      <!-- 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 open = ref(false)
</script>

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

    <UModal v-model="open">
      <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>
```
::

## Props

:component-props

## Preset

:component-preset