Accordion

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

April UI is a set of styled laravel blade components that takes inspiration from shadCN.

It is built using Laravel blade, tailwind CSS, and alpine JS.

Yes. A lot of code was borrowed from Pines UI, and some ideas were gotten from Mary UI.
Component Code 
<april:accordion type="single" collapsible class="w-full md:w-[70%]">
    <april:accordion-item>
        <slot:trigger>What is April UI</slot:trigger>
        <slot:content>
            April UI is a set of styled laravel blade components
            that takes inspiration from shadCN.
        </slot:content>
    </april:accordion-item>
    <april:accordion-item>
        <slot:trigger>What Technology is it built with?</slot:trigger>
        <slot:content>
            It is built using Laravel blade, tailwind CSS, and alpine JS.
        </slot:content>
    </april:accordion-item>
    <april:accordion-item>
        <slot:trigger>Did any other library inspire this project?</slot:trigger>
        <slot:content>
            Yes. A lot of code was borrowed from Pines UI, and some
            ideas were gotten from Mary UI.
        </slot:content>
    </april:accordion-item>
</april:accordion>

When type attribute is set to single, the collapsible attribute allows the currently opened accordion item to be closed

When the type attribute is set to multiple, multiple items can be opened at once.

April UI is a set of styled laravel blade components that takes inspiration from shadCN.

It is built using Laravel blade, tailwind CSS, and alpine JS.

Yes. A lot of code was borrowed from Pines UI, and some ideas were gotten from Mary UI.
Component Code 
<april:accordion type="multiple" class="w-full md:w-[70%]">
    <april:accordion-item>
        <slot:trigger>What is April UI</slot:trigger>
        <slot:content>
            April UI is a set of styled laravel blade components
            that takes inspiration from shadCN.
        </slot:content>
    </april:accordion-item>
    <april:accordion-item>
        <slot:trigger>What Technology is it built with?</slot:trigger>
        <slot:content>
            It is built using Laravel blade, tailwind CSS, and alpine JS.
        </slot:content>
    </april:accordion-item>
    <april:accordion-item>
        <slot:trigger>Did any other library inspire this project?</slot:trigger>
        <slot:content>
            Yes. A lot of code was borrowed from Pines UI,
            and some ideas were gotten from Mary UI.
        </slot:content>
    </april:accordion-item>
</april:accordion>

The component dispatches a value-change event with the current active value in $event.detail.value, which is an array when type is multiple and a string when type is single. The legacy valueChange event is also dispatched. The value of an accordion item is accordion-item-{index}.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish accordion
php artisan april:publish accordion-item
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.