Accordion

Collapsible content panels for saving vertical space.

Examples

Basic Usage

By default, only one item can be open at a time.

Plume UI is a collection of reusable Blade components for Laravel applications, built with Tailwind CSS and AlpineJS.

You can install it via composer. Check the Installation guide for detailed instructions.

Yes, it uses standard Tailwind utility classes and CSS variables for easy customization.
blade 
<x-plume::accordion>
    <x-plume::accordion.item title="What is Plume UI?">
        Plume UI is a collection of reusable Blade components for Laravel
        applications, built with Tailwind CSS and AlpineJS.
    </x-plume::accordion.item>
    ...
    <x-plume::accordion.item title="Is it customizable?">
        Yes, it uses standard Tailwind utility classes and CSS variables for
        easy customization.
    </x-plume::accordion.item>
</x-plume::accordion>

Always Open

Use the alwaysOpen prop to allow multiple items to be expanded simultaneously.

This item is open by default.

You can open this without closing Item 1.
blade 
<x-plume::accordion alwaysOpen>
    <x-plume::accordion.item title="Item 1" open>
        This item is open by default.
    </x-plume::accordion.item>
    <x-plume::accordion.item title="Item 2">
        You can open this without closing Item 1.
    </x-plume::accordion.item>
</x-plume::accordion>
Prop Type Default Description
alwaysOpen bool false Whether multiple items can be open at once.
onToggle string null AlpineJS expression or function to call when an item is toggled.

Usage

blade 
<x-plume::accordion>
    <x-plume::accordion.item title="Section 1">
        Content 1
    </x-plume::accordion.item>
</x-plume::accordion>