快速开始
欢迎使用 Headless UI Themes！本指南将帮助您快速上手并开始使用我们的组件库。
安装
使用 pnpm 安装
推荐使用 pnpm
npm install @anker-in/headless-ui基础使用
推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：
import { Button } from '@anker-in/headless-ui'完整示例
import { Button, Text, Card } from '@anker-in/headless-ui'
function App() {
return (
<Card>
<Text size="4">Hello Headless UI!</Text>
<Button variant="primary">点击我</Button>
</Card>
)
}集成配置
配置 Tailwind CSS
修改项目的 tailwind.config.ts 配置文件：
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配置 Next.js
因为 headless-ui 使用纯 ESM 模块，所以有些非标准第三方 ESM 模块比如 gsap 可能会在 Next.js 中加载失败，需要修改项目的 next.config.js，显式声明需要 transpile 的包：
// next.config.js
module.exports = {
transpilePackages: ['@anker-in/headless-ui', 'gsap'],
}引入 Design Token CSS 变量
在入口文件（如 app.js 或 _app.tsx）直接引入 design token css：
import '@anker-in/headless-ui/tokens/base.css'
import '@anker-in/headless-ui/tokens/anker.css' // brand 可以是 anker, eufy 等等查看所有 Token：https://headless-ui-doc.netlify.app?path=/docs/design-token—docs
Tokens 支持覆盖。
使用组件
// 使用基础组件
import { Button, Skeleton } from '@anker-in/headless-ui'
// 使用业务组件
import { HeroBanner } from '@anker-in/headless-ui/biz'
// 示例
<Button size="lg" variant="primary">
Primary
</Button>
<Button size="sm" variant="secondary">
secondary
</Button>
<Skeleton className="w-[300px] h-[300px] rounded-full" />
<HeroBanner data={bannerConfig} />异常处理
TypeScript 导入 /biz 报错
如果出现 import { XXX } from '@anker-in/headless-ui/biz' TypeScript 报错的情况，可以把以下配置添加到 tsconfig.json 配置文件的 "paths" 属性：
{
"compilerOptions": {
"paths": {
"@anker-in/headless-ui/biz": [
"./node_modules/@anker-in/headless-ui/dist/esm/biz-components/index"
]
}
}
}这可能是旧版本的 moduleResolution 不支持导致的。
TypeScript 支持
Headless UI 完全使用 TypeScript 构建，提供了完整的类型定义，开箱即用。
人工智能就绪
接入 shadcn/ui registry 的能力后使得 AI 工具能够轻松地与您的代码协同工作。其开源代码和一致的 API 允许 AI 模型读取、理解甚至生成新的组件。
人工智能模型可以学习你的组件是如何工作的，并提出改进建议，甚至创建与你现有设计集成的新组件。
下一步
现在您已经成功安装并配置了 Headless UI Themes，可以：
如果您遇到任何问题，请查阅我们的文档或在 GitHub 上提出 issue。