N
Nuxt•4d ago
arsh

how to remove black border from UAvatar?

How can i remove that black border thing? Code: 
<UAvatarGroup :max="4">
              <UTooltip
                :text="codeToCountry(coverage)"
                v-for="coverage in esim.locations"
                :key="coverage">
                <UAvatar
                  class="bg-transparent border-none"
                  :ui="{
                    icon: 'bg-transparent border-none border-transparent',
                    root: 'border-transparent bg-transparent',
                  }"
                  size="md"
                  :icon="`circle-flags:${coverage.toLowerCase()}`"
                  :alt="coverage" />
              </UTooltip>
            </UAvatarGroup>
<UAvatarGroup :max="4">
              <UTooltip
                :text="codeToCountry(coverage)"
                v-for="coverage in esim.locations"
                :key="coverage">
                <UAvatar
                  class="bg-transparent border-none"
                  :ui="{
                    icon: 'bg-transparent border-none border-transparent',
                    root: 'border-transparent bg-transparent',
                  }"
                  size="md"
                  :icon="`circle-flags:${coverage.toLowerCase()}`"
                  :alt="coverage" />
              </UTooltip>
            </UAvatarGroup>
No description
3 Replies
kapa.ai
kapa.ai•4d ago
Hi @arsh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt UI’s UAvatar styles are fully configurable through the ui prop, but the provided sources don’t include the exact key that controls that black border, nor a concrete example of removing it for UAvatar. The knowledge sources only show that Nuxt UI components can be customized via ui (e.g. n / UnoCSS and ui patterns in DevTools UI Kit), not the specific avatar border classes. [UI Kit] Based on what’s available, you’re already doing the right thing conceptually: 
<UAvatar
  class="bg-transparent border-none"
  :ui="{
    icon: 'bg-transparent border-none border-transparent',
    root: 'border-transparent bg-transparent',
  }"
  ...
/>
<UAvatar
  class="bg-transparent border-none"
  :ui="{
    icon: 'bg-transparent border-none border-transparent',
    root: 'border-transparent bg-transparent',
  }"
  ...
/>
However, the sources do not document: - Which ui keys exist specifically for UAvatar (e.g. base, wrapper, etc.). - Whether the border is applied by root, wrapper, or some other internal slot. Because that information isn’t present in the documents above, I can’t confidently give you the exact ui shape that will remove the border (for example, which key needs border-none or ring-0). To proceed, you’d need to: 1. Inspect the rendered HTML in devtools to see which element carries the border class. 2. Map that element to the proper ui slot from the Nuxt UI docs or type definitions for UAvatar. 3. Override that slot in :ui with border-none / ring-0 (or equivalent) and, if necessary, use !-important utilities if Tailwind/UnoCSS precedence requires it. I’m sorry I can’t be more specific here; the knowledge sources simply don’t contain the detailed UAvatar API or its default border styles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@1082730169632043088> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
arsh
arshOP•4d ago
ok ring-0 worked

Did you find this page helpful?