Accordion

<loomi-accordion> / <loomi-accordion-item> is a simple stack of clickable headers that when clicked on, expand to reveal their content or collapse to hide their content.

1
npm install @loomidev/accordion lit

1
import "@loomidev/accordion";

Basic Usage

Each item needs a title for the clickable header, and the content goes in the default slot.

LoomiUI is an open-source UI component library built with Lit and Web Components, designed to help developers build modern, accessible, and high-performance user interfaces that work across frameworks and platforms. By embracing web standards, its components can be used in plain HTML or integrated seamlessly into frameworks such as Astro, Laravel, React, Vue, Angular, and Svelte. The library emphasizes consistency, composability, theming through CSS custom properties, and an excellent developer experience backed by comprehensive, interactive documentation.

Beyond the core library, LoomiUI is envisioned as a complete ecosystem for building production-ready applications. While the core components remain free and open source, developers can extend their workflow with premium templates, starter kits, advanced components, and developer tools that accelerate development without sacrificing flexibility. Every component is documented with live, interactive examples that demonstrate its capabilities, making it easy for developers to learn, customize, and confidently adopt LoomiUI in projects of any size.

LoomiUI is installed with npm, following the same setup flow as most modern frontend libraries.

If you are new to LoomiUI, the recommended starting point is the main package. Installing this package registers all available LoomiUI components in one step, which lets you start building right away without deciding on individual component packages up front.

You customize LoomiUI with normal CSS variables, just like any other styles in your app. Add the variables in your own stylesheet, and every LoomiUI component on the page can pick them up automatically.

That means you can start small: change one color, preview it, and adjust as needed. When you are happy with it, the same values apply across buttons, inputs, alerts, and more.

1
<loomi-accordion>
2
  <loomi-accordion-item title="What is LoomiUI?">
3
    <div>
4
      <p>
5
LoomiUI is an open-source UI component library built with Lit and Web Components, designed to help developers build modern, accessible, and high-performance user interfaces that work across frameworks and platforms. By embracing web standards, its components can be used in plain HTML or integrated seamlessly into frameworks such as Astro, Laravel, React, Vue, Angular, and Svelte. The library emphasizes consistency, composability, theming through CSS custom properties, and an excellent developer experience backed by comprehensive, interactive documentation.</p>
6
<p>
7
Beyond the core library, LoomiUI is envisioned as a complete ecosystem for building production-ready applications. While the core components remain free and open source, developers can extend their workflow with premium templates, starter kits, advanced components, and developer tools that accelerate development without sacrificing flexibility. Every component is documented with live, interactive examples that demonstrate its capabilities, making it easy for developers to learn, customize, and confidently adopt LoomiUI in projects of any size.
8
      </p>
9
    </div>
10
  </loomi-accordion-item>
11
  <loomi-accordion-item title="How do I install it?">
12
    <div>
13
      <p>LoomiUI is installed with npm, following the same setup flow as most modern frontend libraries.</p>
14
      <p class="pt-4">
15
      If you are new to LoomiUI, the recommended starting point is the main package. Installing this package registers all available LoomiUI components in one step, which lets you start building right away without deciding on individual component packages up front.
16
      </p>
17
    </div>
18
  </loomi-accordion-item>
19
  <loomi-accordion-item title="Can I theme it?">
20
    <p>You customize LoomiUI with normal CSS variables, just like any other styles in your app. Add the variables in your own stylesheet, and every LoomiUI component on the page can pick them up automatically.</p>
21

22
<p>That means you can start small: change one color, preview it, and adjust as needed. When you are happy with it, the same values apply across buttons, inputs, alerts, and more.</p>
23
  </loomi-accordion-item>
24
</loomi-accordion>

Custom Title Content

Need something richer than plain text? Use the title slot instead of the title attribute.

What is LoomiUI?

v1.0.0

1
<loomi-accordion>
2
  <loomi-accordion-item>
3
    <div slot="title" style="display:flex;align-items:center;gap:0.5rem">
4
      <loomi-icon name="cube"></loomi-icon>
5
      <div>
6
        <div>What is LoomiUI?</div>
7
        <div class="text-xs text-gray-500">v1.0.0</div>
8
      </div>
9
    </div>
10
    <p>
11
LoomiUI is an open-source UI component library built with Lit and Web Components, designed to help developers build modern, accessible, and high-performance user interfaces that work across frameworks and platforms. By embracing web standards, its components can be used in plain HTML or integrated seamlessly into frameworks such as Astro, Laravel, React, Vue, Angular, and Svelte. The library emphasizes consistency, composability, theming through CSS custom properties, and an excellent developer experience backed by comprehensive, interactive documentation.</p>
12
    </p>
13
  </loomi-accordion-item>
14
</loomi-accordion>

Open by Default

This section starts expanded.

This one doesn't.

1
<loomi-accordion>
2
  <loomi-accordion-item title="Open on load" open>
3
    <p>This section starts expanded.</p>
4
  </loomi-accordion-item>
5
  <loomi-accordion-item title="Closed on load">
6
    <p>This one doesn't.</p>
7
  </loomi-accordion-item>
8
</loomi-accordion>

Open Multiple Accordion Items

By default opening one item closes whatever else is open. Set can-open-multiple to let items stay open independently.

Morning lifts the blinds and paints the room in gold.

Soft rain counts the roofs while the garden learns its song.

1
<loomi-accordion can-open-multiple>
2
  <loomi-accordion-item title="Dawn" open>Morning lifts the blinds and paints the room in gold.</loomi-accordion-item>
3
  <loomi-accordion-item title="Rain" open>Soft rain counts the roofs while the garden learns its song.</loomi-accordion-item>
4
</loomi-accordion>

Ungrouped Accordions

By default items sit inside one shared card, separated by divider lines. Set grouped="false" for each item to render as its own standalone card.

A small wind signs its name across the lake.

The moon keeps watch while city windows blink.

1
<loomi-accordion grouped="false">
2
  <loomi-accordion-item title="Standalone breeze">A small wind signs its name across the lake.</loomi-accordion-item>
3
  <loomi-accordion-item title="Standalone moon">The moon keeps watch while city windows blink.</loomi-accordion-item>
4
</loomi-accordion>

No Padding

1
<loomi-accordion-item title="Tight content" no-padding>
2
  <img src="/banner.jpg" alt="" />
3
</loomi-accordion-item>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

`<loomi-accordion>`

Attribute	Default	Description
`grouped`	`true`	Group items in one card (vs standalone cards). (boolean)
`can-open-multiple`	`false`	Allow multiple open items. (boolean)
`color`	(blank)	Background color when `grouped="false"`.

`<loomi-accordion-item>`

Attribute	Default	Description
`title`	(blank)	Header text (or use the `title` slot).
`open`	`false`	Open by default. (boolean)
`color`	(blank)	Standalone background color.
`no-padding`	`false`	Remove body padding. (boolean)

Slots

Slot	Description
(default)	Content placed inside the component.
`title`	Custom title content.

Events

Event	Description
`loomi-accordion-toggle`	Fired when the accordion is toggled.

Full Example

Small pieces of UI,
stitched lightly to any app,
ready when called.

Install what you need,
import once at the app edge,
then write the element.

1
<loomi-accordion grouped="false" can-open-multiple color="error">
2
  <loomi-accordion-item title="What is loomi?" open>
3
    <p>Small pieces of UI,<br />stitched lightly to any app,<br />ready when called.</p>
4
  </loomi-accordion-item>
5
  <loomi-accordion-item title="How do I install it?">
6
    <p>Install what you need,<br />import once at the app edge,<br />then write the element.</p>
7
  </loomi-accordion-item>
8
</loomi-accordion>

Framework integration

<loomi-accordion-item> and <loomi-accordion> are standard custom elements, so the browser can use them in plain HTML, Blade, React, Vue, Angular, Svelte, Astro, and most other frameworks. The important beginner rule is: install the package, import it once before the tag is rendered, then write the Loomi tag in your template.

Where to run commands

Run install commands from the app where you want to use this component. That means the folder that contains that app’s package.json. Do not run these install commands from packages/accordion unless you are editing LoomiUI itself.

1
cd /path/to/your-app
2
npm install @loomidev/accordion lit

If you are contributing to LoomiUI itself, first move to the top-level components folder. That is where the main package.json for all packages lives, and pnpm --filter ... commands should be run from there:

1
cd /path/to/your-copy-of-loomiui/components
2
pnpm --filter @loomidev/accordion build
3
pnpm --filter @loomidev/accordion typecheck

Choose your framework

Use the CDN version for prototypes, documentation pages, or a quick reproduction. The import map tells the browser where to find Lit, which Loomi components use internally.

1
<script type="importmap">
2
  { "imports": { "lit": "https://esm.sh/lit@3.3.3", "lit/": "https://esm.sh/lit@3.3.3/" } }
3
</script>
4
<script type="module" src="https://esm.sh/@loomidev/accordion"></script>
5

6
<loomi-accordion>
7
  <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
8
  <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
9
</loomi-accordion>

In Vite, Webpack, Parcel, Rollup, or a framework build pipeline, install the package and import it once in your main app JavaScript file. After that, you can use the Loomi tag anywhere in your app.

1
import "@loomidev/accordion";

Run the install command from your Laravel project root, then import the component in resources/js/app.js. If your project uses Laravel Vite, npm run dev and npm run build should also be run from the Laravel project root.

1
cd /path/to/your-laravel-app
2
npm install @loomidev/accordion lit
3
npm run dev

1
import "@loomidev/accordion";

1
<loomi-accordion>
2
  <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
3
  <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
4
</loomi-accordion>

React can render Loomi tags directly. If you are on React 18, or if you need to pass arrays, objects, or functions, use a ref and assign those values after the component mounts.

1
import "@loomidev/accordion";
2

3
export function LoomiExample() {
4
  return (
5
    <loomi-accordion>
6
      <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
7
      <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
8
    </loomi-accordion>
9
  );
10
}

If TypeScript does not recognize the Loomi tag in JSX, add it to your app’s JSX type declarations.

Import the package in the component that uses it, or once in your main Vue file. Vue templates can use Loomi tags directly. For arrays, objects, or functions, pass the value as a JavaScript property instead of as plain text.

1
<script setup>
2
import "@loomidev/accordion";
3
</script>
4

5
<template>
6
  <loomi-accordion>
7
    <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
8
    <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
9
  </loomi-accordion>
10
</template>

If Vue warns that the tag is an unknown component, configure compilerOptions.isCustomElement for tags that start with loomi- in your Vite or Vue config.

Import the package once and tell Angular to allow custom HTML tags with CUSTOM_ELEMENTS_SCHEMA. For NgModule apps, add the schema to the module instead of the standalone component.

1
import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
2
import "@loomidev/accordion";
3

4
@Component({
5
  selector: "app-root",
6
  standalone: true,
7
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
8
  template: `
9
    <loomi-accordion>
10
      <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
11
      <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
12
    </loomi-accordion>
13
  `,
14
})
15
export class AppComponent {}

Svelte can import the package inside a component script. Astro can import it in the frontmatter of the page or layout where the tag appears.

1
<script>
2
  import "@loomidev/accordion";
3
</script>
4

5
<loomi-accordion>
6
  <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
7
  <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
8
</loomi-accordion>

1
---
2
import "@loomidev/accordion";
3
---
4

5
<loomi-accordion>
6
  <loomi-accordion-item title="Shipping">Orders usually ship in 2 business days.</loomi-accordion-item>
7
  <loomi-accordion-item title="Returns">Returns are accepted within 30 days.</loomi-accordion-item>
8
</loomi-accordion>

Server-side rendering notes

Frameworks such as Next.js, Nuxt, SvelteKit, and Astro sometimes render HTML on the server before browser-only code runs. If your framework complains, move the Loomi import to client-side code. In Next.js, that usually means a component with "use client"; in Nuxt, it often means a .client.ts plugin.

Dependencies

@loomidev/core