跳至主要内容
💬 回報這一頁

三種取用方式

三種都是「正確用法」，可以混用。不必全有全無——這正是這本書拆成三層的原因。

流程圖載入中…

（圖只是導覽；三種方式的內容與判準見下文，混用完全合法。）

方式一：只讀規範（零相依）​

最輕的用法。讀 基礎、模式、無障礙， 用你自己的技術棧實作。適合：

  • 已經有一套元件庫，只想統一「操作邏輯」
  • 不是 React（Vue / Svelte / Blazor / 原生）
  • 只想解決一個具體問題（例如「送出前的變更摘要該長怎樣」）

模式章每一則都寫成「問題 → 做法 → 取捨 → 反例」，可以直接當規格書用。

方式二：registry 複製元件（推薦）​

把元件原始碼複製進你的專案。之後它就是你的程式碼，改壞了不會影響別人， 升級也不會半夜被 breaking change 叫醒。

# 一次裝一個
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/data-table.json

# 相依會自動一起裝（DataTable 會帶上 table / input / button / select / tooltip / utils…）

安裝後的落點：

src/
├── components/dooping/    ← 元件
└── lib/dooping/           ← 工具（cn、useSort、csv、download、forms-diff）
前置條件

你的專案要有 components.json（shadcn 的設定檔）與 @/* 路徑別名。 還沒有的話先跑一次 npx shadcn@latest init。

registry 裝進來的就是這個東西
已完成增加 12,800

方式三：安裝 token 套件（唯一建議的硬相依）​

npm install @dooping/tokens
tailwind.config.js
module.exports = {
  presets: [require("@dooping/tokens/tailwind-preset")],
  content: ["./src/**/*.{ts,tsx}"],
};
你的全域 CSS
@import "@dooping/tokens/tokens.css";

沒有用 Tailwind 也可以——tokens.css 是純 CSS 變數，任何宿主都吃得下：

.my-alert {
  background: hsl(var(--danger) / 0.1);
  border: 1px solid hsl(var(--danger) / 0.35);
  color: hsl(var(--danger));
}

需要在 JS 裡拿值（Canvas 圖表、伺服器端產 PDF、Figma plugin）：

import { semanticColors, chartColors } from "@dooping/tokens";

const palette = chartColors("dark");   // ["#2a5ae5", "#0e9488", …]
const colors = semanticColors();        // { primary: "222.2 47.4% 11.2%", … }

該選哪一種​

✅ 這樣做

新專案、React、要快 → 方式二 ＋ 方式三。token 保證換皮一致，元件直接抄。

🚫 不要這樣

不要為了「統一」而把已經上線的舊系統整包換掉。先只導入 token，讓兩套介面顏色一致，其餘慢慢來。

既有系統的導入節奏見 治理 → 導入三階段； 全新專案裝完 token 與元件之後，從頁面章選頁型開始規劃畫面 （每種頁型都附骨架、行為規範與最小安裝集）； 上線之後怎麼跟著規範演進，見跟上新版。