Nuxt•9mo ago

Resize UModal

how can i adjust my modal into smaller size?

<UModal title="Are you sure you want to log out?">
                  <UButton
                    variant="ghost"
                    class="justify-start cursor-pointer w-full text-left text-red-500 hover:bg-red-500/10"
                    >
                    <UIcon name="i-lucide-log-out" class="mr-2" />
                    Logout
                  </UButton>
                  
                  <template #body>
                      <div class="flex justify-center gap-2">
                        <UButton
                          variant="outline"
                          >Cancel</UButton
                          >
                          <UButton
                          variant="solid"
                          color="error"
                          @click="logout"
                          >Logout</UButton
                        >
                    </div>
                  </template>
                </UModal>

<UModal title="Are you sure you want to log out?">
                  <UButton
                    variant="ghost"
                    class="justify-start cursor-pointer w-full text-left text-red-500 hover:bg-red-500/10"
                    >
                    <UIcon name="i-lucide-log-out" class="mr-2" />
                    Logout
                  </UButton>
                  
                  <template #body>
                      <div class="flex justify-center gap-2">
                        <UButton
                          variant="outline"
                          >Cancel</UButton
                          >
                          <UButton
                          variant="solid"
                          color="error"
                          @click="logout"
                          >Logout</UButton
                        >
                    </div>
                  </template>
                </UModal>

6 Replies

kapa.ai•9mo ago

Hi @reina. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To adjust your UModal to a smaller size, you can use the ui prop to customize its width. The UModal component in Nuxt UI has a default width of w-full sm:max-w-lg, but you can override this with your own custom width. Here's how you can modify your code to make the modal smaller:

<UModal 
  title="Are you sure you want to log out?"
  :ui="{ width: 'w-full sm:max-w-xs' }"
>
  <UButton
    variant="ghost"
    class="justify-start cursor-pointer w-full text-left text-red-500 hover:bg-red-500/10"
  >
    <UIcon name="i-lucide-log-out" class="mr-2" />
    Logout
  </UButton>
  
  <template #body>
    <div class="flex justify-center gap-2">
      <UButton variant="outline">Cancel</UButton>
      <UButton variant="solid" color="error" @click="logout">Logout</UButton>
    </div>
  </template>
</UModal>

<UModal 
  title="Are you sure you want to log out?"
  :ui="{ width: 'w-full sm:max-w-xs' }"
>
  <UButton
    variant="ghost"
    class="justify-start cursor-pointer w-full text-left text-red-500 hover:bg-red-500/10"
  >
    <UIcon name="i-lucide-log-out" class="mr-2" />
    Logout
  </UButton>
  
  <template #body>
    <div class="flex justify-center gap-2">
      <UButton variant="outline">Cancel</UButton>
      <UButton variant="solid" color="error" @click="logout">Logout</UButton>
    </div>
  </template>
</UModal>

In this example, I've added the :ui="{ width: 'w-full sm:max-w-xs' }" prop to override the default width. You can adjust the value to any Tailwind width class that suits your needs: - sm:max-w-xs (20rem / 320px) - sm:max-w-sm (24rem / 384px) - sm:max-w-md (28rem / 448px) The w-full part ensures the modal takes full width on mobile devices, while the sm:max-w-* part controls the maximum width on larger screens. According to the Modal component documentation, the default configuration includes width settings that you can customize through the ui prop. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@516186529547288576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

reinaOP•9mo ago

bump

AGill•9mo ago

        <UModal
          :ui="{ content: 'max-w-4xl' }"
        >

        <UModal
          :ui="{ content: 'max-w-4xl' }"
        >

^ for example. The default is max-w-lg See Theme section https://ui.nuxt.com/components/modal#theme

Nuxt UI

Modal Vue Component - Nuxt UI v3

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

reinaOP•9mo ago

thanks!

jpedro73•4mo ago

The ":ui="{ width: 'w-full sm:max-w-xs' }"" the property width do not exists in v3.3, so how could we change the width of the modal using the ui prop?

Gaming

Programming

Resize UModal

Did you find this page helpful?