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>