Accordion

An accordion/collapsible component powered by Alpine.js.

Alpine.js + Collapse Plugin Required

This component requires Alpine.js and the Alpine Collapse plugin to be loaded in your layout for interactive behavior. Without the plugin, the accordion still opens and closes but the x-collapse animation is disabled and Alpine logs a warning.

CDN:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Load the collapse plugin before Alpine core. Current Alpine CDN builds boot via queueMicrotask, so alpine:init fires before any plugin script deferred after core executes — loading the plugin first guarantees it registers in time.

NPM:

npm install alpinejs @alpinejs/collapse

import Alpine from "alpinejs";
import collapse from "@alpinejs/collapse";

Alpine.plugin(collapse);
Alpine.start();

See the installation guide for more setup options.

Live Preview

View in the Styleguide →

Basic Usage

<x-basekit-ui::accordion :items="[
    [
        'value' => 'item-1',
        'title' => 'What is Laravel?',
        'content' => 'Laravel is a web application framework with expressive, elegant syntax.',
    ],
    [
        'value' => 'item-2',
        'title' => 'What is Tailwind CSS?',
        'content' => 'Tailwind CSS is a utility-first CSS framework.',
    ],
]" />

Props

Prop	Type	Default	Description
items	array	[]	Array of accordion items
isMultiple	boolean	false	Allow multiple open items
active	mixed	null	Initial active value(s)
variant	string	'default'	Accordion style (default,bordered,flush,separated)
size	string	'md'	Accordion size (sm,md,lg)

Slots

Slot	Description
default	Custom accordion markup (overrides items output)

Item Structure

Each item should include:

• value (required): unique key for toggling/open state
• title (required): item heading
• content (required): item content

Single Open Item

<x-basekit-ui::accordion
    :items="[
        [
            'value' => 'item-1',
            'title' => 'What is Laravel?',
            'content' => 'Laravel is a web application framework with expressive, elegant syntax.',
        ],
        [
            'value' => 'item-2',
            'title' => 'What is Tailwind CSS?',
            'content' => 'Tailwind CSS is a utility-first CSS framework.',
        ],
    ]"
    :is-multiple="false"
    active="item-1"
/>

Multiple Open Items

<x-basekit-ui::accordion
    :items="[
        [
            'value' => 'item-1',
            'title' => 'Shipping',
            'content' => 'Orders ship within 2 business days.',
        ],
        [
            'value' => 'item-2',
            'title' => 'Returns',
            'content' => 'Returns are accepted within 30 days.',
        ],
        [
            'value' => 'item-3',
            'title' => 'Support',
            'content' => 'Support is available via email and live chat.',
        ],
    ]"
    :is-multiple="true"
    :active="['item-1', 'item-3']"
/>

Variants

Supported variants: default, bordered, flush, separated.

<x-basekit-ui::accordion variant="bordered" :items="[
    [
        'value' => 'item-1',
        'title' => 'Bordered accordion',
        'content' => 'This example uses the bordered variant.',
    ],
    [
        'value' => 'item-2',
        'title' => 'Second item',
        'content' => 'Each item keeps the same bordered treatment.',
    ],
]" />

<x-basekit-ui::accordion variant="flush" :items="[
    [
        'value' => 'item-1',
        'title' => 'Flush accordion',
        'content' => 'This example uses the flush variant.',
    ],
    [
        'value' => 'item-2',
        'title' => 'Second item',
        'content' => 'Each item is flush with the next, and the borders are removed.',
    ],
]" />

<x-basekit-ui::accordion variant="separated" :items="[
    [
        'value' => 'item-1',
        'title' => 'Separated accordion',
        'content' => 'This example uses the separated variant.',
    ],
    [
        'value' => 'item-2',
        'title' => 'Second item',
        'content' => 'Each item is separated by a border, but the borders are not shared between items.',
    ],
]" />

Sizes

Supported sizes: sm, md, lg.

<x-basekit-ui::accordion
    size="sm"
    :items="[
        [
            'value' => 'item-1',
            'title' => 'Compact spacing',
            'content' => 'This example uses the small accordion size.',
        ],
        [
            'value' => 'item-2',
            'title' => 'Second item',
            'content' => 'Use md or lg for roomier layouts.',
        ],
    ]"
 />

With Custom Slot Content

If the default slot is provided, it overrides items rendering.

<x-basekit-ui::accordion>
    <div class="bk-accordion__item" x-data="{ open: false }">
        <button class="bk-accordion__trigger" x-on:click="open = !open" type="button">Custom trigger</button>
        <div class="bk-accordion__content" x-show="open">
            <div class="bk-accordion__body">Custom content</div>
        </div>
    </div>
</x-basekit-ui::accordion>

Custom Classes

Override or extend styles with the class attribute:

<x-basekit-ui::accordion
    :items="[
        [
            'value' => 'item-1',
            'title' => 'Custom spacing',
            'content' => 'This accordion has extra top margin from the class attribute.',
        ],
    ]"
    class="mt-4"
/>

CSS Variables

Customize accordion appearance via CSS variables:

:root {
  --accordion-border: var(--color-slate-200);
  --accordion-header-bg: var(--color-slate-50);
  --accordion-hover-bg: var(--color-slate-100);
  --accordion-title-color: var(--color-slate-900);
  --accordion-icon-color: var(--color-slate-500);
  --accordion-flush-hover-color: var(--color-primary-600);
  --accordion-body-color: var(--color-slate-700);
}

Dark Mode

Dark mode overrides are applied automatically when a parent element has the .dark class:

.dark {
  --accordion-border: var(--color-slate-700);
  --accordion-header-bg: var(--color-slate-800);
  --accordion-hover-bg: var(--color-slate-700);
  --accordion-title-color: var(--color-slate-100);
  --accordion-icon-color: var(--color-slate-400);
  --accordion-body-color: var(--color-slate-300);
  --accordion-flush-hover-color: var(--color-primary-400);
}

For dark mode token details, see Theming — Dark Mode.

Configuration

Configure defaults in config/basekit-laravel-ui.php:

'accordion' => [
    'enabled' => true,
    'variants' => ['default', 'bordered', 'flush', 'separated'],
    'sizes' => ['sm', 'md', 'lg'],
    'default_variant' => 'default',
    'default_size' => 'md',
],