安装

安装对应框架的适配器以及样式表：

React

npm i @thl-ui/react @thl-ui/styles

Vue

npm i @thl-ui/vue @thl-ui/styles

Angular

npm i @thl-ui/angular @thl-ui/styles

@thl-ui/core、@thl-ui/locales、@thl-ui/tokens、@thl-ui/icons 和 @thl-ui/charts 会作为依赖自动安装。

Peer 依赖要求

适配器	要求
@thl-ui/react	React ≥ 18
@thl-ui/vue	Vue ≥ 3.5.2
@thl-ui/angular	Angular ≥ 20（standalone 组件、signals；zoneless 或 zone.js）

每个最低版本都经过验证：在该版本的全新项目中安装已发布的包，进行类型检查、构建并逐页点击测试。

样式

一次性导入完整样式包：

import '@thl-ui/styles/thl-ui.css';

或者只导入 token + 你用到的部分：

import '@thl-ui/styles/tokens.css';
import '@thl-ui/styles/components/button.css';
import '@thl-ui/styles/components/form.css';

可用的组件样式文件：alert、app、avatar、badge、button、card、form、nav、overlay、pages、progress、ribbon、table、widgets。

Angular 需将 CSS 添加到 angular.json：

"styles": ["node_modules/@thl-ui/styles/dist/thl-ui.css", "src/styles.css"]

SCSS 源码同样已发布（@thl-ui/styles/scss/*），如需在构建时修改类名前缀可以使用。

基础样式

thl-ui 不会重置全局元素。为 <body> 添加 thl-body（或为任意容器添加 thl-root）即可获得基础字体、颜色和标题字号：

<body class="thl-body">

字体

Open Sans（可变字体，字重 300–800，SIL OFL 1.1）采用自托管方式：thl-ui.css 已包含 @font-face 规则，woff2 文件随 @thl-ui/styles/dist/fonts/ 一起发布，因此不会向 Google Fonts 发起任何请求。子集：latin、latin-ext、vietnamese、cyrillic、greek；浏览器只会下载页面实际用到的子集。日文和中文文本会回退到系统字体。

如果你导入的是按组件拆分的 CSS 而不是 thl-ui.css，请自行添加 @thl-ui/styles/fonts.css。如需使用其他字体，覆盖 --thl-font-family 即可。

在本 monorepo 中开发

npm install          # 使用 .npmrc 中的 legacy-peer-deps（npm 10.9 的变通方案）
npm run build        # 构建所有包
npm test             # vitest（core + react + vue）
npm run dev:react    # http://localhost:5181
npm run dev:vue      # http://localhost:5182
npm run dev:angular  # http://localhost:5183
npm run dev -w docs  # 本站点，http://localhost:5184