MagicAccordion

MagicAccordion is a collection of components intended for building vertically stacked headlines where each reveals related content.

Preview

• Mirror Ui

  Pro
• Dreamtype™

  Soon
• Azzets

  Soon

• Vue Equipment
• Open Foundry

  Soon

• Readme

  Blog
• About us
• Contact

• GitHub
• Figma

• Legal Notice
• Privacy Policy

Code

<template>
  <magic-accordion-provider id="magic-accordion-demo" class="w-full">
    <demo-list
      v-for="item in footer"
      :key="item.label"
      :headline="item.label"
      :list="<DemoListProps['list']>item.list"
    />
  </magic-accordion-provider>
</template>

<script lang="ts" setup>
import DemoList, { type DemoListProps } from './components/DemoList.vue'
import { footer } from './data/footer.json'
</script>

Overview

• Overview
• Anatomy
• Installation
• Peer Dependencies
• API Reference

Anatomy

<template>
  <magic-accordion-provider id="your-accordion-id">
    <magic-accordion-view>
      <magic-accordion-trigger>
        <!-- your content -->
      </magic-accordion-trigger>
      <magic-accordion-content>
        <!-- your content -->
      </magic-accordion-content>
    </magic-accordion-view>
  </magic-accordion-provider>
</template>

<script setup>
const { selectView } = useMagicAccordion('your-accordion-id')
</script>

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm

pnpm install @maas/vue-equipment

npm

npm install @maas/vue-equipment

yarn

yarn add @maas/vue-equipment

bun

bun install @maas/vue-equipment

Vue

If you are using Vue, import and add MagicAccordionPlugin to your app.

import { createApp } from 'vue'
import { MagicAccordionPlugin } from '@maas/vue-equipment/plugins'

const app = createApp({})

app.use(MagicAccordionPlugin)

Nuxt

The accordion is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicAccordion to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicAccordion'],
  },
})

Composable

In order to interact with the accordion from anywhere within your app, we provide a useMagicAccordion composable. Import it directly when needed.

import { useMagicAccordion } from '@maas/vue-equipment/plugins'

const { selectView } = useMagicAccordion('your-accordion-id')

function handleClick() {
  selectView('your-view-id')
}

TIP

If you have installed the accordion as a Nuxt module, the composable will be auto-imported and is automatically available in your Nuxt app.

Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually.

Package
@nuxt/kit
@maas/vue-autosize
@maas/vue-primitive
@vueuse/core

Installation

pnpm

pnpm install @nuxt/kit @maas/vue-autosize @maas/vue-primitive @vueuse/core

npm

npm install @nuxt/kit @maas/vue-autosize @maas/vue-primitive @vueuse/core

yarn

yarn add @nuxt/kit @maas/vue-autosize @maas/vue-primitive @vueuse/core

bun

bun install @nuxt/kit @maas/vue-autosize @maas/vue-primitive @vueuse/core

API Reference

MagicAccordionProvider

The MagicAccordionProvider wraps the accordion and configures all child components according to the provided options.

Props

Prop	Type	Required
id	MaybeRef<string>	true
asChild	boolean	false
options	MagicAccordionOptions	false

Options

To customize the accordion, override the necessary options. Any custom options will be merged with the default options.

Option	Type	Default
mode	AccordionMode	single
transition	string	string
animation.duration	number	200
animation.easing	function	easeOutQuad
disabled	boolean	false

MagicAccordionView

Props

Prop	Type	Required
id	MaybeRef<string>	false
asChild	boolean	false
active	boolean	false

MagicAccordionContent

Props

Prop	Type	Required
asChild	boolean	false
transition	string	false
animation.duration	number	false
animation.easing	function	false

CSS Variables

Variable	Default
--magic-accordion-content-clip-path	inset(0)

MagicAccordionTrigger

Props

Prop	Type	Required
asChild	boolean	false
disabled	boolean	false
trigger	Interaction[]	false

CSS Variables

Variable	Default
--magic-accordion-trigger-cursor-disabled	not-allowed