1# Accordion
2 
3A stacked set of collapsible panels.
4 
5> Based on [Reka UI Accordion](https://reka-ui.com/docs/components/accordion)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `label?: string`{lang="ts-type"}
12- `icon?: string`{lang="ts-type"}
13- `trailingIcon?: string`{lang="ts-type"}
14- `content?: string`{lang="ts-type"}
15- `value?: string`{lang="ts-type"}
16- `disabled?: boolean`{lang="ts-type"}
17- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
18- `class?: any`{lang="ts-type"}
19- `ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }`{lang="ts-type"}
20 
21## ::component-code
22 
23ignore:
24 
25- items
26  external:
27- items
28  externalTypes:
29- AccordionItem[]
30  hide:
31- class
32  props:
33  class: 'px-4'
34  items: - label: 'Icons'
35  icon: 'i-lucide-smile'
36  content: 'You have nothing to do, @nuxt/icon will handle it automatically.
37- `disabled`:
38- `slot`:
39 
40## Usage
41 
42```vue
43<UAccordion
44  <!-- props here -->
45/>
46```
47 
48## Slots
49 
50- `#body`
51- `#content`
52