GitHub55X

Accordion

Vue accordion for expandable FAQ and content sections, with single or multiple open panels and keyboard support.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/accordion.json

Usage

      
      <script setup lang="ts">
import { Accordion } from "@/components/ui/accordion";
</script>

<template>
  <Accordion.Root>
    <!-- … -->
  </Accordion.Root>
</template>

Composition

      
      Accordion.Root
├── Accordion.Context
├── Accordion.ItemContent
├── Accordion.ItemContext
├── Accordion.ItemIndicator
├── Accordion.ItemTrigger
├── Accordion.Item
├── Accordion.RootProvider

Examples

Default Value

Set the defaultValue prop to specify which item should be expanded by default.

Controlled

Use the value and onValueChange props to control the expanded items.

Root Provider

An alternative way to control the accordion is to use the RootProvider component and the useAccordion hook. This way you can access the state and methods from outside the component.

Collapsible

Use the collapsible prop to allow the user to collapse all panels.

Multiple

Use the multiple prop to allow multiple panels to be expanded simultaneously.

Horizontal

By default, the Accordion is oriented vertically. Use the orientation prop to switch to a horizontal layout.

Lazy Mount

Use the lazyMount prop to defer rendering of accordion content until the item is expanded. Combine with unmountOnExit to unmount content when collapsed, freeing up resources.

Context

Use Accordion.Context or useAccordionContext to access the accordion state.

Item State

Use Accordion.ItemContext or useAccordionItemContext to access the state of an accordion item.

API

See Ark UI Accordion docs for full props and examples.

ComponentsActionSheet