Accordion component

The Accordion component designed with Vue 3 and Tailwind CSS. It includes expandable and collapsible content sections.

Basic Usage

Import and use Accordion in your Vue components as follows:

<template>
  <Accordion :items="accordionItems" name="Accordion 1"/>
</template>

<script setup>
import { Accordion } from '@robuust-digital/vue-components/core';

const accordionItems = [
  {
    title: 'Title 1',
    content: 'Content 1',
  },
  {
    title: 'Title 2',
    content: 'Content 2 <a href="/">containing a anchor</a>',
  },
  {
    title: 'Title 3',
    content: 'Content 3',
  },
];
</script>

Title 1

Content 1

Title 2

Content 2 containing a anchor

Title 3

Content 3

Props

Below are the props supported by Accordion, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
items	Array, Object	Required	Set the array with items containing title and content text.
name	String	undefined	Set a name to only allow a single item opened at the same time
defaultOpenIndex	Number, String	0	Set the index of the active open item.
contentClass	String	''	Set a class for the content wrapper. (e.g .wysiwyg or .prose for rich text styling)

Slots

Slot	Props	Description	Default rendering
summary	{ item, index }	Replaces the clickable summary/trigger for each item.	Renders item.title + icon slot
icon	(none)	Replaces the default icon displayed inside the summary.	<PlusIcon /> (Heroicon)
content	{ item, index }	Replaces the content region of each item.	<div v-html="item.content" />

Custom slot usage

1. Title 1

Content 1

2. Title 2

Content 2 <a href="/">containing a anchor</a>

3. Title 3

Content 3

Show code

<template>
  <Accordion :items="accordionItems">
    <template #summary="{ item, index }">
      <span class="flex items-center gap-2 border border-dotted border-red-500">
        {{ index + 1 }}. {{ item.title }}
      </span>
    </template>
    <template #content="{ item, index }">
      <p class="text-sm">{{ item.content }}</p>
    </template>
  </Accordion>
</template>

<script setup>
import { Accordion } from '@robuust-digital/vue-components/core';

const accordionItems = [
  { title: 'Title 1', content: 'Content 1' },
  { title: 'Title 2', content: 'Content 2 <a href="/">containing a anchor</a>' },
  { title: 'Title 3', content: 'Content 3' },
];
</script>

CSS Customization ⚡️

To customize the accordion styles global

/* Available variables */
:root {
  --rvc-accordion-border-width: var(--rvc-base-border-width);
  --rvc-accordion-border-style: var(--rvc-base-border-style);
  --rvc-accordion-border-color: var(--rvc-base-border-color);
  --rvc-accordion-gap-y: 0;
  --rvc-accordion-padding-y: calc(var(--spacing) * 6);
  --rvc-accordion-font-weight: var(--font-weight-normal);
  --rvc-accordion-font-size: var(--text-base);
  --rvc-accordion-color: var(--color-slate-600);
  --rvc-accordion-summary-padding-x: 0;
  --rvc-accordion-summary-font-weight: var(--font-weight-medium);
  --rvc-accordion-summary-font-size: var(--text-lg);
  --rvc-accordion-summary-border-width: 0;
  --rvc-accordion-summary-border-style: solid;
  --rvc-accordion-summary-border-color: transparent;
  --rvc-accordion-summary-border-radius: 0;
  --rvc-accordion-summary-bg-color: transparent;
  --rvc-accordion-summary-color: var(--color-black);
  --rvc-accordion-summary-color-open: var(--rvc-accordion-summary-color);
  --rvc-accordion-summary-bg-color-open: var(--rvc-accordion-summary-bg-color);
  --rvc-accordion-summary-border-color-open: var(--rvc-accordion-summary-border-color);
  --rvc-accordion-summary-border-radius-open: var(--rvc-accordion-summary-border-radius);
  --rvc-accordion-summary-border-bottom-width-open: var(--rvc-accordion-summary-border-width);
  --rvc-accordion-summary-decoration-hover: underline;
  --rvc-accordion-icon-size: calc(var(--spacing) * 5);
  --rvc-accordion-icon-transform-open: rotate(45deg);
}

Card-style via tokens

/* Example: card-style accordion entirely through tokens */
:root {
  --rvc-accordion-gap-y: calc(var(--spacing) * 4);
  --rvc-accordion-summary-padding-x: calc(var(--spacing) * 5);
  --rvc-accordion-summary-border-width: var(--rvc-base-border-width);
  --rvc-accordion-summary-border-color: var(--color-slate-200);
  --rvc-accordion-summary-border-radius: var(--radius-xl);
  --rvc-accordion-summary-bg-color: var(--color-white);
  --rvc-accordion-summary-color-open: var(--color-slate-900);
  --rvc-accordion-summary-bg-color-open: var(--color-slate-50);
  --rvc-accordion-summary-border-color-open: var(--color-slate-300);
  --rvc-accordion-summary-border-radius-open: var(--radius-xl);
  --rvc-accordion-summary-border-bottom-width-open: var(--rvc-base-border-width);
}

/* Optional: tighten the content spacing to match the card shell */
.rvc-accordion .rvc-accordion-content {
  padding-inline: calc(var(--spacing) * 5);
}

Use these tokens to style the accordion summary and open state globally. If you also want to adjust content padding, you can still target .rvc-accordion-content with custom CSS.

Example

Default Accordion

Title 1

Content 1

Title 2

Content 2 containing a anchor

Title 3

Content 3

Show code

<Accordion :items="accordionItems" name="Accordion 1"/>