Components

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

php artisan blatui:add accordion

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.
<x-ui.accordion type="single" collapsible class="w-full max-w-md">
    <x-ui.accordion-item value="item-1">
        <x-ui.accordion-trigger>Is it accessible?</x-ui.accordion-trigger>
        <x-ui.accordion-content>
            Yes. It adheres to the WAI-ARIA design pattern.
        </x-ui.accordion-content>
    </x-ui.accordion-item>
    <x-ui.accordion-item value="item-2">
        <x-ui.accordion-trigger>Is it styled?</x-ui.accordion-trigger>
        <x-ui.accordion-content>
            Yes. It comes with default styles that match the other components' aesthetic.
        </x-ui.accordion-content>
    </x-ui.accordion-item>
    <x-ui.accordion-item value="item-3">
        <x-ui.accordion-trigger>Is it animated?</x-ui.accordion-trigger>
        <x-ui.accordion-content>
            Yes. It's animated by default, but you can disable it if you prefer.
        </x-ui.accordion-content>
    </x-ui.accordion-item>
</x-ui.accordion>