Accordion
帶彈跳過渡的動畫手風琴／FAQ 展開，支援單開與多開。
以 spring 物理模型驅動高度展開，收尾自帶回彈；內容同步做輕微上滑，層次分明。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<Accordion />
安裝
npx shadcn@latest add https://webberui.com/r/accordion.json或在 components.json 設定 registries 後，改用 @webberui/accordion 安裝。
安裝依賴後，從 registry JSON（/r/accordion.json 的 files[0].content）複製 accordion.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { Accordion } from "@/components/ui/accordion";
<Accordion
defaultValue="a"
items={[
{ value: "a", title: "第一題", content: "第一題的答案。" },
{ value: "b", title: "第二題", content: "第二題的答案。" },
]}
/>;多開模式傳 multiple，defaultValue 可給字串陣列：
<Accordion multiple defaultValue={["a", "b"]} items={items} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | AccordionItemData[] | — | 每一列的資料，含 value、title、content |
multiple | boolean | false | 允許同時展開多列 |
defaultValue | string | string[] | — | 預設展開的 value |
bounce | boolean | true | 過渡是否附帶彈跳，關閉則用平順淡入 |
className | string | — | 透傳到最外層容器 |
AccordionItemData 欄位：value（唯一識別）、title（ReactNode）、content（ReactNode）。
可及性
- trigger 使用原生
button，帶aria-expanded與aria-controls；內容區為region並以aria-labelledby指回 trigger - 開啟系統「減少動態效果」時，退化為短促平順淡入，不做高度彈跳