資料展示
組織架構樹
可收合展開的組織樹，SVG 連接線隨節點動畫重排。
遞迴渲染組織樹狀資料：每個節點是含漸層縮寫頭像、姓名與職稱的卡片，點擊卡片底部的按鈕即可收合或展開子樹（高度動畫折疊），父子之間以連接線串起，收合時按鈕顯示直屬人數。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/org-chart-tree.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<OrgChartTree/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/org-chart-tree.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/org-chart-tree 安裝。
使用
import { OrgChartTree, type OrgNode } from "@/components/ui/org-chart-tree";
const tree: OrgNode = {
id: "ceo",
name: "林曉彤",
title: "執行長",
children: [
{ id: "cto", name: "陳建宏", title: "技術長" },
{ id: "cpo", name: "黃詩涵", title: "產品長" },
],
};
<OrgChartTree data={tree} defaultCollapsed={["cto"]} />Props
OrgChartTree
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
data | OrgNode | — | 組織樹資料（單一根節點，往下遞迴渲染） |
defaultCollapsed | string[] | [] | 初始即收合的節點 id 清單 |
onToggle | (id: string, collapsed: boolean) => void | — | 節點展開/收合時的回呼 |
className | string | — | 透傳到最外層容器 |
OrgNode
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
id | string | — | 節點唯一識別碼，作為收合狀態與 key 的依據 |
name | string | — | 成員姓名，用於顯示與頭像縮寫 |
title | string | — | 職稱，顯示於姓名下方 |
hue | number | 依 id 雜湊 | 頭像底色色相（0–360） |
children | OrgNode[] | — | 直屬子節點，省略即為葉節點 |
可及性
- 收合/展開為原生
<button>，可用 Tab 聚焦、Enter 或 Space 觸發，並帶有清楚的aria-label與aria-expanded狀態 - 使用者系統開啟「減少動態效果」時，收合展開與進場動畫直接切換不播放過渡
- 連接線與頭像縮寫皆為裝飾性元素，以
aria-hidden對輔助科技隱藏，朗讀時只保留姓名與職稱 - 頭像色相由
id確定性雜湊產生，SSR 與 client 渲染結果一致，不會造成 hydration 不匹配