为什么用它
把界面里反复要做的事，一次做好
颜色、间距、对比度、键盘和动效都由同一套规则管着，换品牌色或主题时整站一起变。
零依赖
原生 HTML、CSS、JS。压缩后 JavaScript 约 55.8 KB、CSS 约 28.3 KB（gzip），不需要 jQuery、Vue 或 React。
60 个组件
表单、选择与日期、表格、树、上传、图表、导航、弹层、命令面板……每个都有实时示例和 API 说明。
按需加载
核心包 JS 约 25.3 KB；日期、下拉选择、上传、树、图表、命令面板可以单独加载。
主题
亮暗、B/C 端、三档密度、品牌色一键切换，全部由 CSS 变量驱动。
可访问
键盘操作、ARIA 角色、焦点管理、减少动态效果；展示页用 axe-core 审计，三种主题 0 违规。
对 AI 友好
每个页面都有同名的 Markdown，另有 llms.txt 与 llms-full.txt，方便模型和智能体读取与生成代码。
现场看看
下面都是真实的 ZhaoUI 组件
可以点、可以输入。右上角的主题按钮能切换亮暗和 B/C 端。
操作与状态
输入与选择
数据
适合与不适合
先看它适不适合你的项目
适合
- 后台管理页、内容站点，以及不想引入前端框架的页面
- 需要中文界面文案、键盘操作和无障碍支持的项目
- 需要亮暗、B/C 端和密度主题切换的产品
不适合
- 需要 IE 或旧版浏览器（目标是 Chrome / Edge 111+、Safari 16.4+、Firefox 113+）
- 需要堆叠、散点、地图等复杂图表
- 需要现成的 Vue 或 React 组件封装（目前没有，库本身是原生的）
组件一览
60 个组件，一页一个
点任意一个，看实时示例、代码和 API。
基础与布局
表单与输入
选择与日期
数据展示
导航
反馈与浮层
常见问题
你可能想先问这些
ZhaoUI 是什么？
ZhaoUI 是一套不依赖框架的中文 UI 组件库。引入 zhaoui.css 和 zhaoui.js 两个文件，用 data-zh-* 属性或全局对象 ZhaoUI 就能使用，共 60 个组件。
怎么引入 ZhaoUI？
在页面里加 <link rel="stylesheet" href="zhaoui.css">，并在 </body> 前加 <script src="zhaoui.js"></script>，不要加 defer。之后组件按标记自动初始化，动态插入的组件也会自动初始化。
ZhaoUI 需要 jQuery、Vue 或 React 吗？
不需要。它是原生 HTML、CSS 和 JavaScript，没有任何运行时依赖。
ZhaoUI 支持哪些浏览器？
目标是 Chrome / Edge 111+、Safari 16.4+、Firefox 113+。自动测试在 Chromium、Firefox、WebKit 三个引擎的最新版上运行，更旧的版本没有测过。
ZhaoUI 有多大？
压缩后 JavaScript 约 55.8 KB（gzip），CSS 约 28.3 KB（gzip）；公共类是可选的单独文件，约 9.1 KB。日期选择、下拉选择等可以按需加载。
ZhaoUI 支持暗色模式和多主题吗？
支持。在 <html> 上设置 data-mode（light / dark）、data-audience（b / c，即 B 端与 C 端）、data-density（compact / standard / comfortable），或调用 ZhaoUI.setTheme()；品牌色可以用 ZhaoUI.setBrand() 一键换。
ZhaoUI 的无障碍做到什么程度？
组件带键盘操作和 ARIA 角色，焦点管理在弹层里被限制并在关闭后还原，开启系统“减少动态效果”时动画会立即结束，并适配 Windows 高对比度（后者只在 Chromium 模拟下验证过，没有在真机上测）。
ZhaoUI 的许可证是什么？
目前仅在团队内部使用，开源许可证还没有确定；确定后会写在发布页和 package.json 里。