Nuxt•3w 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>

5 Replies

kapa.ai•3w 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•3w ago

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

reinaOP•3w ago

bump

AGill•3w 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•3w ago

thanks!

Gaming

Programming

Resize UModal

Did you find this page helpful?