Components

Modal

A dialog window that can be used to display a message or request user input.

Usage

Use a Button or any other component in the default slot of the Modal.

Then, use the #content slot to add the content displayed when the Modal is open.

<template>
  <UModal>
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="h-48 m-4" />
    </template>
  </UModal>
</template>

You can also use the #header, #body and #footer slots to customize the Modal's content.

Title

Use the title prop to set the title of the Modal's header.

title

<template>
  <UModal title="Modal with title">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

Description

Use the description prop to set the description of the Modal's header.

description

<template>
  <UModal
    title="Modal with description"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  >
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

Close

Use the close prop to customize or hide the close button (with false value) displayed in the Modal's header.

You can pass all the props of the Button component to customize it.

close.class

<template>
  <UModal
    title="Modal with close button"
    :close="{
      color: 'primary',
      variant: 'outline',
      class: 'rounded-full'
    }"
  >
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

The close button is not displayed if the #content slot is used as it's a part of the header.

Close Icon

Use the close-icon prop to customize the close button Icon. Defaults to i-heroicons-x-mark-20-solid.

closeIcon

<template>
  <UModal title="Modal with close button" close-icon="i-heroicons-arrow-right">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

You can customize this icon globally in your app.config.ts under ui.icons.close key.

Overlay

Use the overlay prop to control whether the Modal has an overlay or not. Defaults to true.

overlay

<template>
  <UModal :overlay="false" title="Modal without overlay">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

Transition

Use the transition prop to control whether the Modal is animated or not. Defaults to true.

transition

<template>
  <UModal :transition="false" title="Modal without transition">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

Fullscreen

Use the fullscreen prop to make the Modal fullscreen.

<template>
  <UModal fullscreen title="Modal fullscreen">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UModal>
</template>

Prevent close

Use the prevent-close prop to prevent the Modal from being closed when clicking outside of it.

<template>
  <UModal prevent-close title="Modal prevent close">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>
  </UModal>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UModal v-model:open="open">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #content>
      <Placeholder class="h-48 m-4" />
    </template>
  </UModal>
</template>

In this example, press O to toggle the Modal.

This allows you to move the trigger outside of the Modal or remove it entirely.

Programmatic usage

You can use the useModal composable to open a Modal programatically.

Make sure to wrap your app with the App component which uses the ModalProvider component.

First, create a modal component that will be opened programatically:

ModalExample.vue

<script setup lang="ts">
const modal = useModal()

defineProps<{
  count: number
}>()
</script>

<template>
  <UModal :title="`This modal was opened programmatically ${count} times`">
    <template #footer>
      <UButton color="gray" label="Close" @click="modal.close()" />
    </template>
  </UModal>
</template>

Then, use it in your app:

<script setup lang="ts">
import { LazyModalExample } from '#components'

const count = ref(0)

const modal = useModal()

function open() {
  count.value++

  modal.open(LazyModalExample, {
    description: 'And you can even provide a description!',
    count: count.value
  })
}
</script>

<template>
  <UButton label="Open" color="gray" variant="subtle" @click="open" />
</template>

You can close the modal within the modal component by calling modal.close().

Nested modals

You can nest modals within each other.

<script setup lang="ts">
const first = ref(false)
const second = ref(false)
</script>

<template>
  <UModal v-model:open="first" title="First modal" :ui="{ footer: 'justify-end' }">
    <UButton color="gray" variant="subtle" label="Open" />

    <template #footer>
      <UButton label="Close" color="gray" variant="outline" @click="first = false" />

      <UModal v-model:open="second" title="Second modal" :ui="{ footer: 'justify-end' }">
        <UButton label="Open second" color="gray" />

        <template #footer>
          <UButton label="Close" color="gray" variant="outline" @click="second = false" />
        </template>
      </UModal>
    </template>
  </UModal>
</template>

With footer slot

Use the #footer slot to add content after the Modal's body.

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <UModal v-model:open="open" title="Modal with footer" description="This is useful when you want a form in a Modal." :ui="{ footer: 'justify-end' }">
    <UButton label="Open" color="gray" variant="subtle" />

    <template #body>
      <Placeholder class="h-48" />
    </template>

    <template #footer>
      <UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
      <UButton label="Submit" color="gray" />
    </template>
  </UModal>
</template>

With command palette

You can use a CommandPalette component inside the Modal's content.

<script setup lang="ts">
const searchTerm = ref('')

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTerm },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
  },
  lazy: true
})

const groups = computed(() => [{
  id: 'users',
  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
  items: users.value || [],
  filter: false
}])
</script>

<template>
  <UModal>
    <UButton
      label="Search users..."
      color="gray"
      variant="subtle"
      icon="i-heroicons-magnifying-glass"
    />

    <template #content>
      <UCommandPalette
        v-model:search-term="searchTerm"
        :loading="status === 'pending'"
        :groups="groups"
        placeholder="Search users..."
        class="h-96"
      />
    </template>
  </UModal>
</template>

API

Props

Prop	Default	Type
`title`		`string`
`description`		`string`
`content`		`Omit<DialogContentProps, "asChild" \| "as" \| "forceMount">` The content of the modal.
`overlay`	`true`	`boolean` Render an overlay behind the modal.
`transition`	`true`	`boolean` Animate the modal when opening or closing.
`fullscreen`	`false`	`boolean` When `true`, the modal will take up the full screen.
`portal`	`true`	`boolean` Render the modal in a portal.
`close`	`true`	`boolean \| ButtonProps` Display a close button to dismiss the modal. `{ size: 'md', color: 'gray', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`string` The icon displayed in the close button.
`preventClose`	`false`	`boolean` When `true`, the modal will not close when clicking outside.
`open`		`boolean` The controlled open state of the dialog. Can be binded as `v-model:open`.
`defaultOpen`		`boolean` The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
`modal`	`true`	`boolean` The modality of the dialog When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
`ui`		`Partial<{ overlay: string; content: string; header: string; body: string; footer: string; title: string; description: string; close: string; }>`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{}`
`header`	`{}`
`title`	`{}`
`description`	`{}`
`close`	`{ ui: any; }`
`body`	`{}`
`footer`	`{}`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    modal: {
      slots: {
        overlay: 'fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75',
        content: 'fixed z-50 w-full h-dvh bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800 flex flex-col focus:outline-none',
        header: 'px-4 py-5 sm:px-6',
        body: 'flex-1 p-4 sm:p-6',
        footer: 'flex items-center gap-1.5 p-4 sm:px-6',
        title: 'text-gray-900 dark:text-white font-semibold',
        description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
        close: 'absolute top-4 right-4'
      },
      variants: {
        transition: {
          true: {
            overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
            content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
          }
        },
        fullscreen: {
          true: {
            content: 'inset-0'
          },
          false: {
            content: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-lg sm:shadow-lg sm:ring ring-gray-200 dark:ring-gray-800'
          }
        }
      }
    }
  }
})

Link

A wrapper around <NuxtLink> with extra props.

NavigationMenu

A list of links that can be displayed horizontally or vertically.