File Tree
資料夾／檔案結構的樹狀展示，支援展開收合動畫、層級導引線與依副檔名的圖示。
以動畫呈現資料夾與檔案階層：點擊資料夾以彈簧節奏展開，子項逐列 stagger 揭示，並依副檔名自動配對圖示。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
0.03
16
<FileTree />
安裝
npx shadcn@latest add https://webberui.com/r/file-tree.json或在 components.json 設定 registries 後，改用 @webberui/file-tree 安裝。
安裝依賴後，從 registry JSON（/r/file-tree.json 的 files[0].content）複製 file-tree.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { FileTree, type FileTreeNode } from "@/components/ui/file-tree";
const tree: FileTreeNode[] = [
{
name: "app",
defaultOpen: true,
children: [
{ name: "layout.tsx" },
{ name: "page.tsx", badge: "M" },
],
},
{ name: "package.json" },
];
<FileTree data={tree} defaultExpandedDepth={1} />;節點若帶有 children（即使是空陣列）即視為資料夾，否則視為檔案。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
data | FileTreeNode[] | — | 樹狀資料 |
defaultExpandedDepth | number | 1 | 此深度以內的資料夾預設展開（0 為全收合） |
stagger | number | 0.03 | 每列進場間隔（秒），另暴露為 --wb-file-stagger |
showLines | boolean | true | 是否顯示縮排的層級導引線 |
indent | number | 16 | 每層縮排單位（px） |
className | string | — | 透傳至外層容器 |
FileTreeNode
| 欄位 | 型別 | 說明 |
|---|---|---|
name | string | 顯示名稱 |
children | FileTreeNode[] | 子節點；存在即代表為資料夾 |
defaultOpen | boolean | 該資料夾是否預設展開 |
icon | LucideIcon | 覆寫節點圖示 |
badge | string | 右側徽章文字，例如 M、A |
可及性
- 外層為
role="tree"，各節點為role="treeitem"，資料夾帶aria-expanded - 使用者系統開啟「減少動態效果」時，展開收合與逐列進場都改為立即切換
- 首次渲染與 SSR 一致，掛載後才決定是否啟用動畫，避免 hydration mismatch