Skip to main content

​
Overview

The Modal component displays content in an overlay dialog, typically used for important interactions that require user attention. Built on Reka UI’s Dialog component.

​
Basic Usage

<template>
  <UModal v-model:open="isOpen" title="My Modal" description="This is a modal description">
    <template #default="{ open }">
      <UButton @click="isOpen = true">Open Modal</UButton>
    </template>
    <template #body>
      <p>Modal content goes here</p>
    </template>
  </UModal>
</template>

<script setup>
const isOpen = ref(false)
</script>

​
Props

​
title
string
The title of the modal displayed in the header.
​
description
string
The description text displayed below the title.
​
overlay
boolean
default:"true"
Render an overlay behind the modal.
​
scrollable
boolean
default:"false"
When true, enables scrollable overlay mode where content scrolls within the overlay.
​
transition
boolean
default:"true"
Animate the modal when opening or closing.
​
fullscreen
boolean
default:"false"
When true, the modal will take up the full screen.
​
portal
boolean | string | HTMLElement
default:"true"
Render the modal in a portal.
​
close
boolean | ButtonProps
default:"true"
Display a close button to dismiss the modal. Can be configured with button props: { size: 'md', color: 'neutral', variant: 'ghost' }
​
closeIcon
string
default:"appConfig.ui.icons.close"
The icon displayed in the close button. Accepts Iconify icon names.
​
dismissible
boolean
default:"true"
When false, the modal will not close when clicking outside or pressing escape.
​
open
boolean
Controls the open state of the modal (v-model:open).
​
defaultOpen
boolean
The default open state when uncontrolled.
​
modal
boolean
default:"true"
The modality of the dialog. When set to true, interaction outside the element will be disabled.
​
content
DialogContentProps
Additional props passed to the dialog content element.
​
class
any
CSS class for styling the trigger element.
​
ui
object
Theme customization object for component slots.

​
Events

​
update:open
(open: boolean) => void
Emitted when the open state changes.
​
after:leave
() => void
Emitted after the modal leave transition completes.
​
after:enter
() => void
Emitted after the modal enter transition completes.
​
close:prevent
() => void
Emitted when a close attempt is prevented (when dismissible is false).

​
Slots

​
default
{ open: boolean }
The trigger element for opening the modal. Receives the current open state.
​
content
{ close: () => void }
Complete control over the modal content, replacing the default structure.
​
header
{ close: () => void }
Customizes the header section of the modal.
​
title
{}
Customizes the title text.
​
description
{}
Customizes the description text.
​
actions
{}
Additional actions displayed in the header, typically between title and close button.
​
close
{ ui: object }
Customizes the close button.
​
body
{ close: () => void }
The main content area of the modal.
​
footer
{ close: () => void }
Footer section for actions or additional content.

​
Examples

​
Fullscreen Modal

<template>
  <UModal v-model:open="isOpen" fullscreen title="Fullscreen Modal">
    <template #default>
      <UButton>Open Fullscreen</UButton>
    </template>
    <template #body>
      <p>This modal takes up the entire screen.</p>
    </template>
  </UModal>
</template>

​
Scrollable Modal

<template>
  <UModal v-model:open="isOpen" scrollable title="Scrollable Modal">
    <template #default>
      <UButton>Open Scrollable</UButton>
    </template>
    <template #body>
      <div style="height: 2000px">
        <p>Long content that scrolls...</p>
      </div>
    </template>
  </UModal>
</template>

​
Non-dismissible Modal

<template>
  <UModal v-model:open="isOpen" :dismissible="false" title="Confirm Action">
    <template #default>
      <UButton>Open Non-dismissible</UButton>
    </template>
    <template #body>
      <p>You must confirm or cancel.</p>
    </template>
    <template #footer="{ close }">
      <UButton @click="close">Cancel</UButton>
      <UButton @click="handleConfirm">Confirm</UButton>
    </template>
  </UModal>
</template>

​
Custom Header Actions

<template>
  <UModal v-model:open="isOpen" title="Modal with Actions">
    <template #default>
      <UButton>Open Modal</UButton>
    </template>
    <template #actions>
      <UButton size="sm" variant="ghost">Help</UButton>
    </template>
    <template #body>
      <p>Modal content with custom header actions.</p>
    </template>
  </UModal>
</template>
  • Drawer - For slide-in overlays from screen edges
  • Popover - For contextual floating content
  • Dialog - Reka UI Dialog documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us