Kern GitHub

Accordion

Multi-open accordion container. Render `components/primitives/accordion-item` companions inside; each item owns independent x-data and an x-collapse panel, requiring @alpinejs/collapse.
Requires Alpine.js
Accordion is multi-open only: every `accordion-item` owns its own Alpine state, so opening one item never closes another. The item trigger follows the Disclosure trigger contract without adding an outer item border: state is exposed through `aria-expanded`, expanded triggers become bold, and the chevron rotates from the ARIA attribute. Panels use `x-collapse`, so install `@alpinejs/collapse` anywhere you copy this component. The panel padding lives on an inner wrapper to keep the collapse animation smooth.

Default

Kern is a copy-paste component library for Statamic projects. Copy the Antlers partial, then own and edit it in your app.

Yes. Accordion intentionally ships multi-open only. Each item has independent state instead of shared root state.

The item panel uses Alpine's x-collapse plugin. The inner wrapper carries the padding so the height transition does not jank. 
 1{{ partial:components/primitives/accordion }}

 2    {{ partial:components/primitives/accordion-item label="What is Kern?" }}

 3        Kern is a copy-paste component library for Statamic projects. Copy the Antlers partial, then own and edit it

 4        in your app.

 5    {{ /partial:components/primitives/accordion-item }}

 6    {{ partial:components/primitives/accordion-item label="Can multiple items stay open?" }}

 7        Yes. Accordion intentionally ships multi-open only. Each item has independent state instead of shared root

 8        state.

 9    {{ /partial:components/primitives/accordion-item }}

10    {{ partial:components/primitives/accordion-item label="What powers the animation?" }}

11        The item panel uses Alpine's

12        <code>x-collapse</code>

13        plugin. The inner wrapper carries the padding so the height transition does not jank.

14    {{ /partial:components/primitives/accordion-item }}

15{{ /partial:components/primitives/accordion }}

Initially open

This item starts expanded because open="true" is explicitly coerced before it reaches Alpine.

This item starts closed and can be opened independently. 
 1{{ partial:components/primitives/accordion }}

 2    {{ partial:components/primitives/accordion-item label="Shipping details" open="true" }}

 3        This item starts expanded because

 4        <code>open="true"</code>

 5        is explicitly coerced before it reaches Alpine.

 6    {{ /partial:components/primitives/accordion-item }}

 7    {{ partial:components/primitives/accordion-item label="Returns" }}

 8        This item starts closed and can be opened independently.

 9    {{ /partial:components/primitives/accordion-item }}

10{{ /partial:components/primitives/accordion }}

Heading level

Use heading="h2" through heading="h6" to match the surrounding document outline. The default is h3 . 
 1{{ partial:components/primitives/accordion }}

 2    {{ partial:components/primitives/accordion-item label="Section-level item" heading="h2" }}

 3        Use

 4        <code>heading="h2"</code>

 5        through

 6        <code>heading="h6"</code>

 7        to match the surrounding document outline. The default is

 8        <code>h3</code>

 9        .

10    {{ /partial:components/primitives/accordion-item }}

11{{ /partial:components/primitives/accordion }}

Companion

components/primitives/accordion-item renders the internal _accordion-item.antlers.html companion. Reference it without the underscore in templates.

It is documented here as an Accordion companion and does not get a public collection page of its own.

Need exclusive behavior? In your copied source, lift state to the Accordion root and close other items when one opens. Kern leaves that out so the shipped API stays multi-open and minimal. 

 1<div class="text-muted-foreground space-y-2 text-sm">

 2    <p>

 3        <code>components/primitives/accordion-item</code>

 4        renders the internal

 5        <code>_accordion-item.antlers.html</code>

 6        companion. Reference it without the underscore in templates.

 7    </p>

 8    <p>It is documented here as an Accordion companion and does not get a public collection page of its own.</p>

 9    <p>

10        Need exclusive behavior? In your copied source, lift state to the Accordion root and close other items when

11        one opens. Kern leaves that out so the shipped API stays multi-open and minimal.

12    </p>

13</div>

Props

Name Type Default Description
class string Additional classes merged via tw_merge (root element only)

Slots

Name Fallback / Default Description
default Accordion items; render `components/primitives/accordion-item` companions here

Source

 1{{#

 2    @name Accordion

 3    @desc Multi-open accordion container. Render `components/primitives/accordion-item` companions inside; each item owns independent x-data and an x-collapse panel, requiring @alpinejs/collapse.

 4    @param class string - Additional classes merged via tw_merge (root element only)

 5    @slot default - Accordion items; render `components/primitives/accordion-item` companions here

 6#}}

 7{{ _class = 'border-foreground divide-foreground w-full divide-y-2 border-2 {class}'

 8 | tw_merge }}

 9<div class="{{ _class }}">

10    {{ slot }}

11</div>

Dependencies

Packages

1composer require marcorieser/tailwind-merge-statamic

2npm install alpinejs @alpinejs/collapse