Components

Accordion

Expand and collapse a section of content.

Import

import { Accordion } from "@dr-max/ui/accordion"

The entry carries its own precompiled CSS (including the styles of the Heading and Icon parts it composes) — no extra style imports needed.

Usage

<script setup lang="ts">
import { Accordion } from "@dr-max/ui/accordion"
</script>

<template>
  <Accordion title="Is delivery free?">
    Yes — delivery is free for orders over 999 Kč.
  </Accordion>
</template>

Open by default

Use default-open to render the accordion expanded while keeping it uncontrolled:

Enter the coupon code in the cart — the discount is applied immediately.

<template>
  <Accordion title="How do I redeem a coupon?" default-open>
    Enter the coupon code in the cart — the discount is applied immediately.
  </Accordion>
</template>

Controlled state

Bind the open state with v-model:open when the consumer needs to own it (e.g. a single-open FAQ list):

<script setup lang="ts">
import { Accordion } from "@dr-max/ui/accordion"
import { ref } from "vue"

const open = ref(false)
</script>

<template>
  <Accordion v-model:open="open" title="Is delivery free?">
    Yes — delivery is free for orders over 999 Kč.
  </Accordion>
</template>

Custom title

The title slot replaces the plain-text title prop when the header needs markup:

<template>
  <Accordion>
    <template #title>
      Is delivery <em>really</em> free?
    </template>
    Yes — delivery is free for orders over 999 Kč.
  </Accordion>
</template>

Playground

slot

title

<script setup lang="ts">
import { Accordion } from '@dr-max/ui/accordion'
</script>

<template>
  <Accordion title="Is delivery free?">Yes — delivery is free for orders over 999 Kč.</Accordion>
</template>