Collapsible
An interactive component which expands/collapses a panel.
DuneUI Pro Tag Helper
Collapsible is a DuneUI Pro Tag Helper and not currently available. DuneUI Pro is a paid package which will be released around March 2026.
<dui-collapsible class="flex w-[350px] flex-col gap-2 group/collapsible">
<div class="flex items-center justify-between gap-4">
<h4 class="text-sm font-semibold">
@@ibnbattuta has 3 bookings
</h4>
<dui-collapsible-trigger as-child="true">
<dui-button variant="ButtonVariant.Ghost" size="ButtonSize.Icon" class="size-8">
<dui-icon name="chevrons-up-down" class="group-data-[state=open]/collapsible:hidden"/>
<dui-icon name="chevrons-down-up" class="hidden group-data-[state=open]/collapsible:block"/>
<span class="sr-only">Toggle</span>
</dui-button>
</dui-collapsible-trigger>
</div>
<dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
<dui-item-media>
<img
class="object-cover size-12 rounded"
src="https://images.unsplash.com/photo-1681785841804-4d8a976ee892?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
</dui-item-media>
<dui-item-content>
<dui-item-title>Non-stop to NYC (JFK)</dui-item-title>
<dui-item-description>Departure 8AM - Dec 24, 2025</dui-item-description>
</dui-item-content>
</dui-item>
<dui-collapsible-content class="flex flex-col gap-2">
<dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
<dui-item-media>
<img
class="object-cover size-12 rounded"
src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
</dui-item-media>
<dui-item-content>
<dui-item-title>The Grand Resort & Spa</dui-item-title>
<dui-item-description>Check-in Dec 25 | 7 Nights</dui-item-description>
</dui-item-content>
</dui-item>
<dui-item variant="ItemVariant.Outline" size="ItemSize.Small">
<dui-item-media>
<img
class="object-cover size-12 rounded"
src="https://images.unsplash.com/photo-1557223562-6c77ef16210f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
</dui-item-media>
<dui-item-content>
<dui-item-title>Westminster Abbey Tour</dui-item-title>
<dui-item-description>Dec 26, 11:00 AM Slot | 2 Adult Tickets</dui-item-description>
</dui-item-content>
</dui-item>
</dui-collapsible-content>
</dui-collapsible>Usage
<dui-collapsible>
<dui-collapsible-trigger>
<!-- add the element that triggers the collapsible content here -->>
</dui-collapsible-trigger>
<dui-collapsible-content>
<!-- add the collapsible content here -->
</dui-collapsible-content>
</dui-collapsible>Examples
Button as trigger
DuneUI Pro Tag Helper
as-child is a DuneUI Pro Tag Helper and not currently available. DuneUI Pro is a paid package which will be released around March 2026.
The dui-collapsible-trigger is rendered as a button. This creates issues when you want to add a button element inside the trigger as you cannot use nested button elements.
To work around this limitation, make sure you add the as-child Tag Helper attribute to dui-collapsible-trigger. This will merge the attributes and behavior of dui-collapsible-trigger with its child content and render a single button element.
<dui-collapsible>
<dui-collapsible-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline">Show More</dui-button>
</dui-collapsible-trigger>
<dui-collapsible-content>
More content
</dui-collapsible-content>
</dui-collapsible>The as-child Tag Helper is very powerful but comes with some caveats. Please
refer to the documentation for more
information.
Settings
<dui-card class="mx-auto w-[350px]" size="CardSize.Small">
<dui-card-header>
<dui-card-title>Radius</dui-card-title>
<dui-card-description>
Set the corner radius of the element.
</dui-card-description>
</dui-card-header>
<dui-card-content>
<dui-collapsible class="flex items-start gap-2 group/collapsible">
<dui-field-group class="grid w-full grid-cols-2 gap-2">
<dui-field>
<dui-field-label for="radius-x-1" class="sr-only">
Radius X
</dui-field-label>
<dui-input id="radius-x-1" placeholder="0"/>
</dui-field>
<dui-field>
<dui-field-label for="radius-y-1" class="sr-only">
Radius Y
</dui-field-label>
<dui-input id="radius-y-1" placeholder="0"/>
</dui-field>
<dui-collapsible-content class="col-span-full grid grid-cols-subgrid gap-2">
<dui-field>
<dui-field-label for="radius-x-2" class="sr-only">
Radius X
</dui-field-label>
<dui-input id="radius-x-2" placeholder="0"/>
</dui-field>
<dui-field>
<dui-field-label for="radius-y-2" class="sr-only">
Radius Y
</dui-field-label>
<dui-input id="radius-y-2" placeholder="0"/>
</dui-field>
</dui-collapsible-content>
</dui-field-group>
<dui-collapsible-trigger as-child="true">
<dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
<dui-icon name="minimize" class="group-data-[state=open]/collapsible:hidden"/>
<dui-icon name="maximize" class="hidden group-data-[state=open]/collapsible:block"/>
</dui-button>
</dui-collapsible-trigger>
</dui-collapsible>
</dui-card-content>
</dui-card>