Accordion

<div class="flex w-full justify-center">
    <div class="w-full max-w-xl rounded-large border border-foreground/10 bg-card px-4">
        <x-components.accordion>
            <x-components.accordion.item title="Is it accessible?" open>
                Yes. Each header is a real button and the panel is fully keyboard reachable.
            </x-components.accordion.item>
            <x-components.accordion.item title="Is it animated?">
                Yes — it animates with a CSS grid trick, so there's no Alpine plugin to install.
            </x-components.accordion.item>
            <x-components.accordion.item title="Can I customize it?">
                Absolutely. Every part is yours to edit once you publish the component.
            </x-components.accordion.item>
        </x-components.accordion>
    </div>
</div>

<div class="flex w-full justify-center">
    <div class="w-full max-w-xl rounded-large border border-foreground/10 bg-card px-4">
        <x-components.accordion exclusive>
            <x-components.accordion.item title="Getting started" open>
                Add the accordion, then compose items inside it.
            </x-components.accordion.item>
            <x-components.accordion.item title="Billing">
                Manage your plan and payment details here.
            </x-components.accordion.item>
            <x-components.accordion.item title="Security">
                Opening this one closes any other open item automatically.
            </x-components.accordion.item>
        </x-components.accordion>
    </div>
</div>