Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Anatomy

Pass a list of items to the component.

<template>
  <UiAccordion :items />
</template>

<script lang="ts" setup>
  const items = [];
</script>

Or use each part individually

<template>
  <UiAccordion>
    <UiAccordionItem>
      <UiAccordionHeader>
        <UiAccordionTrigger />
      </UiAccordionHeader>
      <UiAccordionContent />
    </UiAccordionItem>
  </UiAccordion>
</template>

Installation

npx ui-thing@latest add accordion

Usage

Basic

The most common way to use the accordion is by just passing an array of items to the items prop. Each item should have a value, title, and content.

Yes. It's unstyled by default, giving you freedom over the look and feel.

Custom styling

If you want to change the way that the items look, you can do so by using the different components that the accordion is composed of.

Yes! Reka UI is a collection of low-level UI components that you can use to create a design system.

Custom icon

You can change the icon that is displayed based on the open state of an item. Just override the the trigger slot and then override the icon slot.

It depends on the language and your level of experience. Some languages are easier to learn than others, but most people can learn the basics of a new language in a few weeks. To become proficient, it can take several months or even years of practice.