Laravel Collapsible Component
Free · MITA show/hide content component with smooth expand and collapse transitions.
A Collapsible built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::collapsible>
Installation
composer require bluestarsystem/aura-ui
Usage
<x-aura::collapsible>
<x-slot:trigger>
<x-aura::button variant="outline">Toggle Content</x-aura::button>
</x-slot:trigger>
<p class="p-4">This content can be shown or hidden by clicking the trigger.</p>
</x-aura::collapsible>
See the full API, props and live examples in the Collapsible documentation.
Overview
The <x-aura::collapsible> component provides an expandable/collapsible content area with smooth height transitions. It supports a customizable trigger slot and can be set to open by default. Useful for FAQs, expandable sections, and progressive disclosure patterns.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open |
bool |
false |
Whether the content is expanded by default. |
Slots
| Slot | Description |
|---|---|
| Default | The collapsible content area. |
trigger |
The clickable element that toggles the content visibility. |
See more examples and every variant in the Collapsible documentation.