arca-ui

Accordion

Accordion component for expanding/collapsing content areas. Supports multiple variants and style overrides.

变体展示

默认变体

Classic underline separated style

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/themes/zine-mark/accordion"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Zine Mark?</AccordionTrigger>
    <AccordionContent>
      A bold system inspired by zines and street art.
    </AccordionContent>
  </AccordionItem>
</Accordion>

卡片变体

Standalone card style with full border and shadow

Ghost 变体

Lightweight style with subtle borders

样式覆盖示例

强调色覆盖

Using signal orange as accent color

深色背景覆盖

Using inverted shadows inside dark containers

功能色覆盖

Using different functional colors to distinguish content types

全宽布局

Remove width limit, adapt to container

实际案例

FAQ 列表

设置面板

状态展示

单项展开

Only one can be expanded at a time

多项展开

Multiple can be expanded simultaneously

禁用项

默认展开

This item is expanded by default.