A centred dialog that teleports to the body, goes fullscreen on mobile by default and respects safe-area insets. Control visibility with the `show` prop and listen for `close`.
Ejemplos
Open on click
Toggle the show prop and close on the emitted event.
<div>
<UiButton @click="state.open = true">Open modal</UiButton>
<UiModal :show="state.open" max-width="md" @close="state.open = false">
<div class="p-6">
<h3 class="text-lg font-semibold">Delete project?</h3>
<p class="mt-2 text-sm text-gray-500">This cannot be undone.</p>
<div class="mt-6 flex justify-end gap-2">
<UiButton variant="ghost" color="gray" @click="state.open = false">Cancel</UiButton>
<UiButton color="red" @click="state.open = false">Delete</UiButton>
</div>
</div>
</UiModal>
</div>Widths
Ten max-width presets from xs to 5xl, plus full-screen.
<div class="flex flex-wrap gap-3">
<UiButton variant="outline" @click="state.size = 'xs'">xs</UiButton>
<UiButton variant="outline" @click="state.size = 'lg'">lg</UiButton>
<UiButton variant="outline" @click="state.size = '3xl'">3xl</UiButton>
<UiModal :show="!!state.size" :max-width="state.size || 'sm'" @close="state.size = null">
<div class="p-6">
<h3 class="text-lg font-semibold">max-width: {{ state.size }}</h3>
<p class="mt-2 text-sm text-gray-500">The panel widens to the chosen preset.</p>
<div class="mt-6 flex justify-end"><UiButton @click="state.size = null">Close</UiButton></div>
</div>
</UiModal>
</div>Persistent, centred on mobile
persistent ignores backdrop clicks; fullscreen-mobile false keeps it a centred dialog on small screens instead of filling them.
<div>
<UiButton variant="outline" @click="state.p = true">Open persistent</UiButton>
<UiModal :show="state.p" persistent :fullscreen-mobile="false" @close="state.p = false">
<div class="p-6">
<h3 class="text-lg font-semibold">Persistent</h3>
<p class="mt-2 text-sm text-gray-500">Clicking the backdrop does nothing — close it with the button.</p>
<div class="mt-6 flex justify-end"><UiButton @click="state.p = false">Got it</UiButton></div>
</div>
</UiModal>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| show | boolean | false | Whether the modal is open. |
| maxWidth | string | 'sm' | Maximum panel width. xssmmdlgxl2xl3xl4xl5xlfull |
| fullscreenMobile | boolean | true | Fill the screen on small viewports. |
| persistent | boolean | false | Ignore backdrop clicks and back gestures. |
| panelClass | string | '' | Extra classes for the panel. |
| z | string | 'z-50' | Stacking (z-index) class. |
| padding | string | 'md:p-4' | Backdrop padding classes. |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
close | void | Emitted on backdrop click or back gesture (unless persistent). |
Slots
| Slot | Descripción |
|---|---|
default | Modal content. |