Component

Accordion

<dom-accordion>

Disclosure panels with ARIA region/expanded wiring, single or multiple open, and clean transitions.

Playground

Try every prop live

Accordion playground

Edit props in the inspector — expand sections to preview items and the multiple mode.

npm install @getdom/studio/vue, then import the components you need. Tree-shaking is on by default.

Yes — the headless layer is plain custom elements that work in any HTML page.

Override CSS variables on :root (or [data-theme]). Tailwind 4 token utilities are provided out of the box.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomAccordion } from '@getdom/studio/vue';

const data = reactive({
	  "items": [
	    {
	      "title": "How do I install DOM Studio?",
	      "content": "npm install @getdom/studio/vue, then import the components you need. Tree-shaking is on by default."
	    },
	    {
	      "title": "Does it work without Vue?",
	      "content": "Yes — the headless layer is plain custom elements that work in any HTML page."
	    },
	    {
	      "title": "How do I theme it?",
	      "content": "Override CSS variables on :root (or [data-theme]). Tailwind 4 token utilities are provided out of the box."
	    }
	  ],
	  "multiple": false
	});
</script>

<template>
	<DomAccordion
		v-bind="data"
	/>
</template>

Demo

Live preview

npm install @getdom/studio/vue, then import the components you need. Tree-shaking is on by default.

Yes — the headless layer is plain custom elements that work in any HTML page.

Override CSS variables on :root (or [data-theme]). Tailwind 4 token utilities are provided out of the box.

Usage

Vue

<script setup>
import { DomAccordion } from '@getdom/studio/vue';
const items = [
  { title: 'Q1', content: 'A1' },
  { title: 'Q2', content: 'A2' },
];
</script>

<template>
  <DomAccordion :items="items" />
  <!-- allow multiple panels open -->
  <DomAccordion :items="items" multiple />
</template>

Usage

Web component

<dom-accordion>
  <dom-accordion-item open>
    <button slot="header">Section A</button>
    <div slot="content">…</div>
  </dom-accordion-item>
  <dom-accordion-item>
    <button slot="header">Section B</button>
    <div slot="content">…</div>
  </dom-accordion-item>
</dom-accordion>

Props

Name	Type	Default	Description
items	Array<{ title, content }>	—	Items to render.
multiple	boolean	false	Allow multiple panels open at the same time.