Accordion

A collapsible panel list suitable for displaying FAQ sections, detailed terms, or step-by-step information. Built on Radix Vue headless primitives, it supports multiple neo-brutalist visual variants.

Demo

Preview

默认

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。它具有高对比度的边框、实心阴影、大胆的配色以及极具物理触感的交互设计。

扁平

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。

幽灵

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。

交互（interactive）

面板阴影增强，内容区带有轻微高亮，标题栏与面板保持原位。

Installation

pnpm dlx brutx-vue@latest add accordion

Usage

vue

<script setup>
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'brutx-ui-vue'
</script>

<template>
    <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
            <AccordionTrigger>Panel Title 1</AccordionTrigger>
            <AccordionContent>
                Accordion content 1 goes here.
            </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
            <AccordionTrigger>Panel Title 2</AccordionTrigger>
            <AccordionContent>
                Accordion content 2 goes here.
            </AccordionContent>
        </AccordionItem>
    </Accordion>
</template>

Variants

Use the variant prop on AccordionItem to set different neo-brutalist styles:

Variant	Description
`default`	Default with thick black border and solid shadow offset at the bottom-right
`flat`	Thick black border only, no shadow effects
`ghost`	Transparent background, no border or shadow, minimal presentation
`interactive`	Enhanced shadow and highlight on hover while the header and panel stay in place

vue

<template>
    <AccordionItem value="item" variant="interactive">
        <AccordionTrigger>Interactive Accordion Item</AccordionTrigger>
        <AccordionContent>Hover enhances the shadow; the header stays in place when expanded.</AccordionContent>
    </AccordionItem>
</template>

Content Area Styling

AccordionContent styling automatically inherits the variant of its parent AccordionItem (synchronized via provide/inject, no manual specification needed). The separator line is activated at the bottom of AccordionTrigger upon expand, allowing the content panel to focus on padding and secondary background hierarchy:

Variant	Content Area Styling	Visual Effect
`default`	`bg-brutal-muted`	Secondary muted background creating depth against the collapsed state
`flat`	`bg-brutal-muted/30`	Gentle semi-transparent muted tone, echoing the flat design
`ghost`	Transparent background	Clean transparent background, lightweight and minimal
`interactive`	`bg-brutal-muted hover:bg-brutal-muted/20`	Secondary background with subtle hover highlight

Note: The variant applies across all three layers -- AccordionItem (container), AccordionTrigger (trigger), and AccordionContent (content area) -- to maintain visual consistency.

Sub-components

Component	Description
`Accordion`	Root container, manages expand state and mode
`AccordionItem`	Single panel item, contains trigger and content
`AccordionTrigger`	Panel trigger, click to toggle expand/collapse
`AccordionContent`	Panel content area, shown when expanded

API Reference

Accordion

Accordion — Props
Name	Type	Default	Description
`collapsible`	`boolean \| undefined`	`—` Runtime fallback:`When omitted, uses the Reka UI AccordionRoot default of false.`	In single mode, allows activating the open item again to close all content. It has no effect in multiple mode.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Runtime fallback `When omitted, uses the Reka UI AccordionRoot default of false.` Applied by the component under the documented runtime conditions. Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`disabled`	`boolean \| undefined`	`—` Runtime fallback:`When omitted, uses the Reka UI AccordionRoot default of false.`	Disables interaction with the entire accordion and all its items.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Runtime fallback `When omitted, uses the Reka UI AccordionRoot default of false.` Applied by the component under the documented runtime conditions. Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`dir`	`Direction \| undefined`	`—` Runtime fallback:`When omitted, uses the Reka UI ConfigProvider direction, then falls back to ltr.`	The reading direction of the accordion, used for keyboard navigation.
Details Declared type Direction \| undefined Literal values `"ltr"` `"rtl"` Default value details Not declared `—` Runtime fallback `When omitted, uses the Reka UI ConfigProvider direction, then falls back to ltr.` Applied by the component under the documented runtime conditions. Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`orientation`	`DataOrientation \| undefined`	`—` Runtime fallback:`When omitted, Reka UI AccordionRoot uses vertical orientation.`	The accordion orientation used for layout state and arrow-key navigation.
Details Declared type DataOrientation \| undefined Literal values `"horizontal"` `"vertical"` Default value details Not declared `—` Runtime fallback `When omitted, Reka UI AccordionRoot uses vertical orientation.` Applied by the component under the documented runtime conditions. Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`unmountOnHide`	`boolean \| undefined`	`—` Runtime fallback:`When omitted, Reka UI AccordionRoot uses true.`	Controls whether closed content is unmounted; an item can override it with its own unmountOnHide prop.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Runtime fallback `When omitted, Reka UI AccordionRoot uses true.` Applied by the component under the documented runtime conditions. Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`asChild`	`boolean \| undefined`	`—`	Merges the root primitive props and behavior into its child element.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`as`	`AsTag \| Component \| undefined`	`—`	The element or component rendered by the root primitive; asChild delegates rendering to the child.
Details Declared type AsTag \| Component \| undefined Literal values `"a"` `"button"` `"div"` `"form"` `"h2"` `"h3"` `"img"` `"input"` `"label"` `"li"` `"nav"` `"ol"` `"p"` `"span"` `"svg"` `"template"` `"ul"` Default value details Not declared `—` Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`type`	`SingleOrMultipleType \| undefined`	`—`	Selects single or multiple expansion, overriding the mode inferred from modelValue or defaultValue.
Details Declared type SingleOrMultipleType \| undefined Literal values `"multiple"` `"single"` Default value details Not declared `—` Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`modelValue`	`string \| string[] \| undefined`	`—`	The controlled expanded value: a string for single mode or a string array for multiple mode. Supports v-model.
Details Declared type string \| string[] \| undefined Default value details Not declared `—` Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`defaultValue`	`string \| string[] \| undefined`	`—`	The initially expanded value in uncontrolled mode.
Details Declared type string \| string[] \| undefined Default value details Not declared `—` Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue
`class`	`string \| undefined`	`—`	Custom CSS classes merged onto the accordion root element.
Details Declared type string \| undefined Default value details Not declared `—` Source Accordion.vue:6 packages/ui/src/components/accordion/Accordion.vue

Accordion — Events
Name	Signature or type	Description
`@update:modelValue`	`[value: string \| string[] \| undefined]`	Emits the new expanded value to synchronize single or multiple state through v-model.
Details Declared type [value: string \| string[] \| undefined] Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue

Accordion — Slots
Name	Signature or type	Description
`#default`	`{}`	The accordion items, typically AccordionItem components. This wrapper does not forward the underlying primitive slot arguments.
Details Declared type {} Source Accordion.vue packages/ui/src/components/accordion/Accordion.vue

AccordionContent

AccordionContent — Props
Name	Type	Default	Description
`forceMount`	`boolean \| undefined`	`—`	Forces content mounting so an external animation library can control its visibility transitions.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
`asChild`	`boolean \| undefined`	`—`	Merges the content primitive props and behavior into the inner content container.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
`as`	`AsTag \| Component \| undefined`	`—`	The element or component rendered by the collapsible content primitive.
Details Declared type AsTag \| Component \| undefined Literal values `"a"` `"button"` `"div"` `"form"` `"h2"` `"h3"` `"img"` `"input"` `"label"` `"li"` `"nav"` `"ol"` `"p"` `"span"` `"svg"` `"template"` `"ul"` Default value details Not declared `—` Source AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
`class`	`string \| undefined`	`—`	Classes merged onto the outer element that handles collapse animation. The inner container inherits its visual variant from AccordionItem.
Details Declared type string \| undefined Default value details Not declared `—` Source AccordionContent.vue:8 packages/ui/src/components/accordion/AccordionContent.vue

AccordionContent — Slots
Name	Signature or type	Description
`#default`	`{}`	The body content displayed when the panel is expanded.
Details Declared type {} Source AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue

AccordionItem

AccordionItem — Props
Name	Type	Default	Description
`variant`	`"default" \| "flat" \| "ghost" \| "interactive" \| undefined`	`"default"`	The item visual variant, also provided to its trigger and content area.
Details Declared type NonNullable<"flat" \| "default" \| "ghost" \| "interactive" \| null \| undefined> \| undefined Literal values `"default"` `"flat"` `"ghost"` `"interactive"` Default value details Declaration `'default'` Source: packages/ui/src/components/accordion/AccordionItem.vue Resolved value `"default"` Source AccordionItem.vue:12 packages/ui/src/components/accordion/AccordionItem.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes merged onto the accordion item root.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/accordion/AccordionItem.vue Resolved value `undefined` Source AccordionItem.vue:13 packages/ui/src/components/accordion/AccordionItem.vue
`disabled`	`boolean \| undefined`	`—`	Disables this item. It is also disabled whenever the root Accordion is disabled.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
`value` Required	`string`	`—`	The item string identifier, which must be unique within its Accordion.
Details Declared type string Default value details Not declared `—` Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
`unmountOnHide`	`boolean \| undefined`	`—` Runtime fallback:`Inherits unmountOnHide from the root Accordion when omitted.`	Controls whether this item content is unmounted when closed.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Runtime fallback `Inherits unmountOnHide from the root Accordion when omitted.` Applied by the component under the documented runtime conditions. Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
`asChild`	`boolean \| undefined`	`—`	Merges the item primitive props and behavior into its child element.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
`as`	`AsTag \| Component \| undefined`	`—`	The element or component rendered by the item root primitive.
Details Declared type AsTag \| Component \| undefined Literal values `"a"` `"button"` `"div"` `"form"` `"h2"` `"h3"` `"img"` `"input"` `"label"` `"li"` `"nav"` `"ol"` `"p"` `"span"` `"svg"` `"template"` `"ul"` Default value details Not declared `—` Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue

AccordionItem — Slots
Name	Signature or type	Description
`#default`	`{}`	The item trigger and content, typically AccordionTrigger and AccordionContent. No scope arguments are provided.
Details Declared type {} Source AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue

AccordionTrigger

AccordionTrigger — Props
Name	Type	Default	Description
`asChild`	`boolean \| undefined`	`—`	Merges the trigger primitive props and behavior into its child; preserve focusable trigger semantics when composing it.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Not declared `—` Source AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
`as`	`AsTag \| Component \| undefined`	`—`	The element or component rendered by the trigger primitive.
Details Declared type AsTag \| Component \| undefined Literal values `"a"` `"button"` `"div"` `"form"` `"h2"` `"h3"` `"img"` `"input"` `"label"` `"li"` `"nav"` `"ol"` `"p"` `"span"` `"svg"` `"template"` `"ul"` Default value details Not declared `—` Source AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes merged onto the trigger element, rather than its surrounding heading.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/accordion/AccordionTrigger.vue Resolved value `undefined` Source AccordionTrigger.vue:10 packages/ui/src/components/accordion/AccordionTrigger.vue
`iconSize`	`IconSize \| undefined`	`"lg"`	The size of the built-in ChevronDown icon. A custom icon slot controls its own icon size.
Details Declared type IconSize \| undefined Literal values `"2xl"` `"lg"` `"md"` `"sm"` `"xl"` `"xs"` Referenced types IconSize Type definition — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> Default value details Declaration `'lg'` Source: packages/ui/src/components/accordion/AccordionTrigger.vue Resolved value `"lg"` Source AccordionTrigger.vue:10 packages/ui/src/components/accordion/AccordionTrigger.vue

AccordionTrigger — Slots
Name	Signature or type	Description
`#default`	`{}`	The heading text or content inside the trigger.
Details Declared type {} Source AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
`#icon`	`{}`	Replaces the expansion icon, which defaults to ChevronDown. Its container inherits variant styles and rotates when expanded. An explicitly empty slot hides the icon container.
Details Declared type {} Source AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue

Accessibility

Keyboard operation: Supports Space / Enter to trigger expand/collapse, arrow keys to navigate between panels
ARIA attributes: Automatically manages aria-expanded, aria-controls, role="region", etc.
Focus management: Tab key focuses the trigger, focus order matches panel order

Accordion ​

Demo ​

什么是 BrutxUI？

它支持无障碍吗？

展开时如何保持阅读位置？

什么是 BrutxUI？

它支持无障碍吗？

什么是 BrutxUI？

它支持无障碍吗？

悬停时会发生什么？

内容区样式如何继承？

Installation ​

Usage ​

Variants ​

Content Area Styling ​

Sub-components ​

API Reference ​

Accordion

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

AccordionContent

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

AccordionItem

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Accordion

Demo

Installation

Usage

Variants

Content Area Styling

Sub-components

API Reference

Accessibility