Laravel Accordion Component

Free · MIT

Collapsible content panels for organizing information into expandable sections.

A Accordion built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::accordion>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::accordion>
    <x-aura::accordion.item title="Section One">
        Content for section one goes here.
    </x-aura::accordion.item>

    <x-aura::accordion.item title="Section Two">
        Content for section two goes here.
    </x-aura::accordion.item>
</x-aura::accordion>

See the full API, props and live examples in the Accordion documentation.

Overview

The Accordion component provides collapsible content panels that allow users to show and hide sections of related content. Built with Alpine.js for smooth animations, it supports single or multiple open panels, custom icons, and default open states.

Props

Accordion

Prop	Type	Default	Description
`multiple`	`bool`	`false`	Allow multiple panels to be open simultaneously.

Accordion Item

Prop	Type	Default	Description
`title`	`string`	`''`	The heading text displayed in the trigger button.
`open`	`bool`	`false`	Whether the panel is open by default.
`icon`	`string\|null`	`null`	Optional icon name displayed before the title.