Installation

Install dependencies

npm install radix-vue @heroicons/vue

Update tailwind config

Extend your theme and add the accordion animations and the keyframes.

animation: {
  accordionDown: 'accordionDown 150ms cubic-bezier(0.87, 0, 0.13, 1)',
  accordionUp: 'accordionUp 150ms cubic-bezier(0.87, 0, 0.13, 1)'
},
keyframes: {
  accordionDown: {
    from: { height: '0px' },
    to: { height: 'var(--radix-collapsible-content-height)' }
  },
  accordionUp: {
    from: { height: 'var(--radix-collapsible-content-height)' },
    to: { height: '0px' }
  }
}

Add component

Copy and paste the code into your project's component directory.

Usage notes

In order to accept a template for each trigger and content, we use vue slots.

For the triggers, name them trigger{number}, and for the contents, name them content{number}:

<Accordion>
  <template #trigger1>
    <span>Trigger</span>
  </template>
  <template #trigger2>
    <span>Trigger 2</span>
  </template>
  <template #content1>
    <span>Content 1</span>
  </template>
  <template #content2>
    <span>Content 2</span>
  </template>
</Accordion>

Inside the template tag, you can put whatever you want.

Make sure you create the same number of trigger and content slots.

To define a open item by default, use the defaultValue prop with item{number} as the value:

<Accordion defaultValue="item1">
  ...
</Accordion>