Add variant on UCollapsible | Nuxt | Page 1

#

Hi @dusky kernel. 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 UCollapsible component does not currently expose a variant prop in its API. The documented props are:

as
disabled
defaultOpen
open (v-model)
unmountOnHide
ui (for styling) [Collapsible API]

So there is no built‑in way (per the docs) to switch between a “button style” and a “naked style” via a variant prop.

However, you can already achieve a “naked” look by:

Using your own trigger instead of a styled UButton in the default slot.
Or passing custom classes via the ui prop to strip or change styles on the trigger/content. [Collapsible usage]

Example of a minimal / naked trigger:

<template>
  <UCollapsible class="w-48">
    <button class="text-sm underline">
      Toggle
    </button>

    <template #content>
      <div class="mt-2 text-xs text-neutral-500">
        Content here
      </div>
    </template>
  </UCollapsible>
</template>

Since your request is a feature idea (a variant prop on UCollapsible itself), the documentation doesn’t mention such a feature or any plan for it. The knowledge sources don’t provide information about roadmap or design decisions for adding this prop, so I can’t say whether it will be added.

To move this forward, the best next step would be to open or comment on an issue in the Nuxt UI GitHub repo describing:

The desired variant API (e.g. variant="button" | "naked").
How it should affect default styles vs. current behavior.
Any examples of usage you have in mind.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

#Add variant on UCollapsible

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: