Nuxt UI Pro v1.0 is out with dashboard components!

DashboardModal

A pre-built Modal with consistent styling for your dashboard.

Usage

Built on top of the Modal component, the DashboardModal contains a header, body and footer.

Its header matches exactly the DashboardNavbar on mobile and contains a close button matching the DashboardSlideover and DashboardSearch.

Use the title, description and icon props to customize the modal.

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

function onDelete () {
  loading.value = true

  setTimeout(() => {
    loading.value = false
    open.value = false
  }, 1000)
}

// This is a hack to keep the modal open
watch(open, (value) => {
  if (!value) {
    setTimeout(() => open.value = true, 1000)
  }
})
</script>

<template>
  <UDashboardModal
    v-model="open"
    title="Delete account"
    description="Are you sure you want to delete your account?"
    icon="i-heroicons-exclamation-circle"
    :ui="{
      icon: { base: 'text-red-500 dark:text-red-400' } as any,
      footer: { base: 'ml-16' } as any
    }"
  >
    <template #footer>
      <UButton color="red" label="Delete" :loading="loading" @click="onDelete" />
      <UButton color="white" label="Cancel" @click="open = false" />
    </template>
  </UDashboardModal>
</template>

Slots

icon
{}
title
{}
description
{}
default
{}
footer
{}
header
{}

Props

icon
string
undefined
title
string
undefined
description
string
undefined
closeButton
{}
{}
ui
{}
{}
modelValue
boolean
false

Config

{
  rounded: 'sm:rounded-lg',
  shadow: 'sm:shadow-xl',
  width: 'sm:max-w-xl',
  height: 'h-dvh sm:h-auto',
  padding: 'p-0',
  header: {
    base: 'flex items-start justify-between gap-x-1.5 flex-shrink-0 min-h-[--header-height]',
    inner: 'flex items-start gap-4',
    padding: 'px-4 py-4 sm:px-6'
  },
  body: {
    base: 'flex-1 flex flex-col gap-y-3 overflow-y-auto',
    padding: 'px-4 py-5 sm:p-6'
  },
  footer: {
    base: 'flex items-center gap-x-1.5 flex-shrink-0',
    padding: 'px-4 py-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',
  icon: {
    wrapper: 'inline-flex',
    base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
  },
  default: {
    closeButton: {
      icon: 'i-heroicons-x-mark-20-solid',
      color: 'gray',
      variant: 'ghost',
      size: 'sm'
    }
  }
}