Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add collapsible

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

This content can be shown or hidden by clicking the trigger above.

<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 above.</p>
</x-aura::collapsible>
<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>

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.

Variants / Examples

Default Open

This section starts expanded and can be collapsed by clicking the trigger.

<x-aura::collapsible :open="true">
    <x-slot:trigger>
        <x-aura::button variant="ghost">Click to Collapse</x-aura::button>
    </x-slot:trigger>

    <div class="p-4 bg-aura-surface-50 dark:bg-aura-surface-800 rounded-lg">
        <p>This section starts expanded and can be collapsed by clicking the trigger.</p>
    </div>
</x-aura::collapsible>
<x-aura::collapsible :open="true">
    <x-slot:trigger>
        <x-aura::button variant="ghost">Click to Collapse</x-aura::button>
    </x-slot:trigger>

    <div class="p-4 bg-aura-surface-50 rounded-lg">
        <p>This section starts expanded.</p>
    </div>
</x-aura::collapsible>

FAQ Style

Aura UI is a Blade component library for Laravel, built with Tailwind CSS and Alpine.js.

Yes, the core library is completely free and open source.

Yes, all components support both light and dark mode out of the box.

<div class="space-y-2">
    <x-aura::collapsible>
        <x-slot:trigger>
            <div class="flex items-center justify-between w-full p-4 bg-aura-surface-50 dark:bg-aura-surface-800 rounded-lg cursor-pointer hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700">
                <span class="font-medium">What is Aura UI?</span>
                <x-aura::icon name="chevron-down" class="w-4 h-4" />
            </div>
        </x-slot:trigger>
        <div class="px-4 py-3">
            <p class="text-aura-surface-600 dark:text-aura-surface-400">Aura UI is a Blade component library for Laravel, built with Tailwind CSS and Alpine.js.</p>
        </div>
    </x-aura::collapsible>

    <x-aura::collapsible>
        <x-slot:trigger>
            <div class="flex items-center justify-between w-full p-4 bg-aura-surface-50 dark:bg-aura-surface-800 rounded-lg cursor-pointer hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700">
                <span class="font-medium">Is it free?</span>
                <x-aura::icon name="chevron-down" class="w-4 h-4" />
            </div>
        </x-slot:trigger>
        <div class="px-4 py-3">
            <p class="text-aura-surface-600 dark:text-aura-surface-400">Yes, the core library is completely free and open source.</p>
        </div>
    </x-aura::collapsible>

    <x-aura::collapsible>
        <x-slot:trigger>
            <div class="flex items-center justify-between w-full p-4 bg-aura-surface-50 dark:bg-aura-surface-800 rounded-lg cursor-pointer hover:bg-aura-surface-100 dark:hover:bg-aura-surface-700">
                <span class="font-medium">Does it support dark mode?</span>
                <x-aura::icon name="chevron-down" class="w-4 h-4" />
            </div>
        </x-slot:trigger>
        <div class="px-4 py-3">
            <p class="text-aura-surface-600 dark:text-aura-surface-400">Yes, all components support both light and dark mode out of the box.</p>
        </div>
    </x-aura::collapsible>
</div>
<div class="space-y-2">
    @foreach($faqs as $faq)
        <x-aura::collapsible>
            <x-slot:trigger>
                <div class="flex items-center justify-between w-full p-4 bg-aura-surface-50 rounded-lg cursor-pointer">
                    <span class="font-medium">{{ $faq->question }}</span>
                    <x-aura::icon name="chevron-down" class="w-4 h-4" />
                </div>
            </x-slot:trigger>
            <div class="px-4 py-3">
                <p class="text-aura-surface-600">{{ $faq->answer }}</p>
            </div>
        </x-aura::collapsible>
    @endforeach
</div>

Accessibility

  • The trigger element includes aria-expanded to indicate the current state to screen readers.
  • The collapsible content area uses aria-hidden when collapsed.
  • Focus management is handled automatically via Alpine.js transitions.