BreezeUI
  • English

    • Accordion

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

    Component Features

    • 🎛️ Single/Multiple Mode: Supports both single (one panel open at a time) and multiple (multiple panels open simultaneously) modes.
    • 🔄 Fully Controlled: Control the expanded state via v-model or defaultValue.
    • ⚡ Lazy Rendering: Supports lazyRender — content is only rendered when expanded.
    • ♿️ Accessibility: Built-in keyboard navigation and screen reader compatibility.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    The basic accordion mode only allows one panel to be expanded at a time. Use type="single" and collapsible to allow closing the currently open panel.

    <script setup lang="ts">
import { ref } from 'vue'
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent
} from '@breezeui/vue'

const singleValue = ref('item-1')
</script>

<template>
  <BrAccordion v-model="singleValue" type="single" collapsible class="w-full">
    <BrAccordionItem value="item-1">
      <BrAccordionTrigger>Is it accessible?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-2">
      <BrAccordionTrigger>Is it styled?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It comes with default styles that matches the other components' aesthetic.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-3">
      <BrAccordionTrigger>Is it animated?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It's animated by default, but you can disable it if you prefer.
      </BrAccordionContent>
    </BrAccordionItem>
  </BrAccordion>
</template>

    Multiple Panels

    Set type="multiple" to allow multiple panels to be expanded at the same time.

    <script setup lang="ts">
import { ref } from 'vue'
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent
} from '@breezeui/vue'

const multipleValue = ref(['item-1', 'item-2'])
</script>

<template>
  <BrAccordion v-model="multipleValue" type="multiple" class="w-full">
    <BrAccordionItem value="item-1">
      <BrAccordionTrigger>Section 1</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 1.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-2">
      <BrAccordionTrigger>Section 2</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 2.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-3">
      <BrAccordionTrigger>Section 3</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 3.
      </BrAccordionContent>
    </BrAccordionItem>
  </BrAccordion>
</template>

    Theming

    Global Customization (BrConfigProvider) & Local Customization

    You can override default CSS variables via the theme prop of BrConfigProvider, or directly override styles using TailwindCSS utility classes.

    <script setup lang="ts">
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent,
  BrConfigProvider
} from '@breezeui/vue'

const customTheme = {
  border: '#8b5cf6', // Violet-500
  primary: '#8b5cf6'
}
</script>

<template>
  <div class="space-y-8 w-full">
    <!-- Using BrConfigProvider -->
    <BrConfigProvider :theme="customTheme">
      <BrAccordion type="single" collapsible class="w-full">
        <BrAccordionItem value="item-1">
          <BrAccordionTrigger>Global Theme Override</BrAccordionTrigger>
          <BrAccordionContent>
            The border and primary colors are overridden using BrConfigProvider.
          </BrAccordionContent>
        </BrAccordionItem>
      </BrAccordion>
    </BrConfigProvider>

    <!-- Using TailwindCSS Classes -->
    <BrAccordion type="single" collapsible class="w-full">
      <BrAccordionItem value="item-1" class="border-b-2 border-dashed border-red-500">
        <BrAccordionTrigger class="hover:text-red-500 hover:no-underline text-lg group">
          Custom Class Override
          <template #icon>
            <div class="w-5 h-5 rounded-full bg-red-100 text-red-500 flex items-center justify-center shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180">
              ↓
            </div>
          </template>
        </BrAccordionTrigger>
        <BrAccordionContent class="text-red-600 bg-red-50 p-4 rounded-b-lg">
          This section uses custom background, border, padding, and slot to override the default arrow icon.
        </BrAccordionContent>
      </BrAccordionItem>
    </BrAccordion>
  </div>
</template>

    API

    BrAccordion Props

    NameTypeDefaultDescription
    type'single' | 'multiple''single'Determines whether one or multiple items can be opened at the same time.
    modelValue / v-modelstring | string[]-The value of the item(s) to expand.
    defaultValuestring | string[]-The value of the item(s) to expand by default.
    collapsiblebooleanfalseWhen type is "single", allows closing content when clicking trigger for an open item.
    disabledbooleanfalseWhether the entire accordion is disabled.

    BrAccordionItem Props

    NameTypeDefaultDescription
    valuestring-(Required) A unique value for the item.
    disabledbooleanfalseWhether the item is disabled.

    BrAccordionTrigger Props

    NameTypeDefaultDescription
    iconstring | Component-Custom icon component to replace the default ChevronDown.
    hideIconbooleanfalseWhether to hide the right icon.

    Slots

    • BrAccordionTrigger supports #icon slot to customize the toggle icon.
    • BrAccordionContent has a default slot for the content.