跳到正文
小小东 UI

开始

三种用法

同一份令牌、同一套组件，按项目选一层用。

Chrome 插件

一分钟新建一个插件，组件拷进插件自己的 vendor/xxd/（MV3 不能加载远程代码）。

cd xxd-ui-ki
pnpm xxd new ~/js/插件-今日待办 --name 今日待办 --name-en "Today" --slug today
pnpm xxd sync ~/js/插件-今日待办     # 以后更新组件
pnpm xxd status ~/js/插件-*          # 谁落后了
<script src="vendor/xxd/boot.js" data-key="today-ui" data-default-density="compact"></script>
<link rel="stylesheet" href="vendor/xxd/xxd.css">
<script src="vendor/xxd/icons.js"></script>
<script src="vendor/xxd/xxd.js"></script>
<script src="vendor/xxd/extension.js"></script>
<body class="xxd-page">…</body>

会员站（已有一套变量的项目）

不改样子地接入：layered 令牌（老变量永远优先）、相同的声明改由令牌提供、图标从 @xxd/icons 同步。

// member-cloudflare/xxd.config.json
{ "vendorDir": false, "layeredTokensRegions": ["public/styles.css"], "iconNodesTargets": ["src/lib/xxd-icon-nodes.js"],
  "adopt": { "file": "public/styles.css", "aliases": { "--ui-backdrop": "var(--backdrop)" } } }

pnpm xxd sync  …/member-cloudflare
pnpm xxd adopt …/member-cloudflare
CHROME_EXE=… node scripts/verify/css-vars-diff.cjs before.css after.css   # 应当零变化

React 项目

import { Button, Dialog, DialogActions, XxdAppearanceProvider } from "@xxd/react";
import "@xxd/react/standalone.css";       // 不用 Tailwind
// 或 Tailwind v4：@import "tailwindcss"; @import "@xxd/react/styles.css";

写代码时守住