# @anker-in/headless-ui 中文文档
规范地址：https://npmcn.com/package/%40anker-in/headless-ui/
版本：1\.3\.87
npm 元数据更新时间：2026-11-09T08:30:17.871Z
中文译文更新时间：2026-11-09T08:31:45.845Z
软件包许可：GPLv3
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40anker-in/headless-ui
原文对照：https://npmcn.com/package/%40anker-in/headless-ui/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：5 MB，1917 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：40 个
- peer 依赖：gsap ^3\.13\.0，remark-gfm ^3\.0\.1，@gsap/react ^2\.1\.2，remark-math ^5\.1\.1，react-markdown ^8\.0\.7，@copilotkit/react-ui 1\.1\.2，@copilotkit/react-core 1\.1\.2，@copilotkit/runtime-client-gql 1\.1\.2
- 首次发布：2024-05-16T06:54:49.889Z
- 最新版本发布：2026-11-09T08:30:17.632Z
- 近 30 天下载量：10081（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：2217（近 12 个月 1404 个）
## 中文简介
[捐款额](https://npmcn.com/package/%40anker-in/headless-ui/CONTRIBUTING.md)
## 安装
```sh
npm install @anker-in/headless-ui
```
也可以使用：`pnpm add @anker-in/headless-ui`、`yarn add @anker-in/headless-ui`、`bun add @anker-in/headless-ui`
## README
### 开发
[CONTRIBUTING.md](https://npmcn.com/package/%40anker-in/headless-ui/CONTRIBUTING.md)
# 使用方法
```shell
npm install @anker-in/headless-ui
```
1. 无头项目修改tailwind.config.ts 配置文件
```js
import type { Config } from 'tailwindcss'
+ import headlessUIPreset from '@anker-in/headless-ui/tailwind.config.js'
export default {
+ presets: [
+ headlessUIPreset, // ❗❗❗重要！使用预设
+ ],
content: [
+ './node_modules/@anker-in/headless-ui/dist/**/*.js', // ❗❗❗重要！把这些加入content
],
} satisfies Config
```
因为headless-ui 使用纯 ESM 模块, 所以有些非标准第三方ESM模块比如gsap可能会在nextjs 中加载失败， 需要修改无头项目的next.config.js ，显式声明需要 transpile 的包
```
// next.config.js
module.exports = {
transpilePackages: ['@anker-in/headless-ui', 'gsap'],
}
```
2. 添加 design token css 变量文件
在入口文件 app.js 直接引入 design token css
```js
import '@anker-in/headless-ui/tokens/base.css'
import '@anker-in/headless-ui/tokens/{barnd}.css' // brand 可以是 anker, eufy 等等
```
查看所有Token https://headless-ui-doc.netlify.app?path=/docs/design-token--docs Tokens 支持覆盖
栅格左右边距 Token `--grid-margin`（`px-grid` 工具类使用它）定义在 `tokens/base.css`，必须引入 `base.css`，否则 `px-grid` 退回 16px。
默认是阶梯式，与升级前一致：16px、32px（≥768px）、64px（≥1025px），1440px 至 1919px 固定 64px，1920px 起为 `calc(50% - 832px)`。升级后不做任何改动，页面表现不变。
需要流式间距时主动开启：在页面最外层或 `` 上声明 `data-grid="fluid"`（或 `class="grid-fluid"`），其内库组件的左右边距在 1440px 至 1920px 之间从 64px 线性过渡到 128px，消除 1920px 处的跳变。注意写死阶梯式边距的定制组件和已安装的旧副本不会跟着变，开启范围内它们与库组件的左边缘会在 1441–1919px 错开，需要先迁移到 `px-grid`。流式范围内的局部区域可以用 `data-grid="legacy"`（或 `class="grid-legacy"`）切回阶梯式。开关只覆盖变量，不改组件代码。
```jsx
// 使用组件
import { Button, Skeleton } from '@anker-in/headless-ui'
import { HeroBanner } from '@anker-in/headless-ui/biz'
// ...
```
❗❗❗异常处理
1. 如果出现 `import { XXX } from '@anker-in/headless-ui/biz'`
typescript 报错的情况，可以把
```json
"@anker-in/headless-ui/biz": [
"./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
],
```
添加到tsconfig 配置文件的"paths" 属性。 这可能是旧版本的`moduleResolution` 不支持
## 常见问题
### @anker-in/headless-ui 是什么？
捐款额
### 如何安装 @anker-in/headless-ui？
在项目目录运行 npm install @anker-in/headless-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：gsap（^3\.13\.0）、@gsap/react（^2\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @anker-in/headless-ui 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @anker-in/headless-ui 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @anker-in/headless-ui 可以商用吗？
@anker-in/headless-ui 使用 GPLv3 许可。声明的许可为 GPLv3，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。
### @anker-in/headless-ui 的下载量有多少？
根据 npm 官方下载统计，@anker-in/headless-ui 在 2026/10/06 – 2026/11/04 这 30 天内被下载 10,081 次，日均约 336 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @anker-in/headless-ui 还在维护吗？
最新版本 1\.3\.87 发布于 2026/11/09（今天）；至今共发布 2217 个版本，其中过去 12 个月发布了 1404 个；首次发布于 2024/05/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。