組織架構樹

遞迴渲染組織樹狀資料：每個節點是含漸層縮寫頭像、姓名與職稱的卡片，點擊卡片底部的按鈕即可收合或展開子樹（高度動畫折疊），父子之間以連接線串起，收合時按鈕顯示直屬人數。

載入預覽⋯

安裝

npx shadcn@latest add https://webberui.com/r/org-chart-tree.json

或在 components.json 設定 registries 後，改用 @webberui/org-chart-tree 安裝。

安裝依賴後，從 registry JSON（/r/org-chart-tree.json 的 files[0].content）複製 org-chart-tree.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

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 不匹配

安裝

使用

Props

OrgChartTree

OrgNode

可及性

On this page