Repolode
提交项目
knadh

knadh/oat

零依赖的语义化 HTML、CSS 与 JS 界面组件库，体积约 10KB，无需 class 即可样式化原生元素。

在 GitHub 查看官网
Star
5,535
Fork
259
未关闭 Issue
3
最近提交
昨天

这是什么？

Oat 是一个基于语义化 HTML 与 CSS 的轻量界面组件库。引入一个很小的 CSS 文件和一个小型 JS 文件即可使用，表单、按钮、表格、对话框等常见元素会根据标签和属性自动获得样式，大多数标记无需添加 class。

它没有框架、构建步骤或 npm 安装要求，少数动态组件以 WebComponents 实现，JavaScript 代码量很少。适合希望快速搭建美观的 Web 应用和仪表盘、又不想引入庞大前端依赖树的开发者。

作者创建它的初衷是摆脱常见 JavaScript 组件库臃肿和依赖频繁变动的问题。在线演示和文档见 oat.ink。

核心功能

  • 01无需 class 名，即可对语义化 HTML 标签和属性进行样式化。
  • 02以一个小型 CSS 文件和一个 JS 文件交付，没有任何依赖。
  • 03无需框架、构建工具或包管理器安装。
  • 04提供搭建 Web 应用常用的组件和元素。
  • 05动态组件基于 WebComponents 实现，JavaScript 代码量极少。

适用场景

  • 在没有前端构建流程的情况下快速搭建内部管理工具或仪表盘。
  • 用简洁的语义化标记为静态站点或服务端渲染页面添加样式。
  • 在原型阶段快速搭建 Web 界面，避免引入庞大的组件框架。

快速上手

  1. 1

    在你的 HTML 页面中引入 Oat 的 CSS 和 JS 文件

标签

#css-framework#ui-components#semantic-html#web-components#frontend#no-build#lightweight#component-library#css#dashboard-design

常见问题

oat 是什么？
零依赖的语义化 HTML、CSS 与 JS 界面组件库，体积约 10KB，无需 class 即可样式化原生元素。 Oat 是一个基于语义化 HTML 与 CSS 的轻量界面组件库。引入一个很小的 CSS 文件和一个小型 JS 文件即可使用，表单、按钮、表格、对话框等常见元素会根据标签和属性自动获得样式，大多数标记无需添加 class。
oat 可以免费使用吗？用的什么许可证？
oat 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
oat 还在维护吗？
活跃维护中。oat 最近一次提交是在 2026年10月19日。
oat 适合用来做什么？
在没有前端构建流程的情况下快速搭建内部管理工具或仪表盘。 用简洁的语义化标记为静态站点或服务端渲染页面添加样式。 在原型阶段快速搭建 Web 界面，避免引入庞大的组件框架。
oat 怎么安装和运行？
在你的 HTML 页面中引入 Oat 的 CSS 和 JS 文件
在哪里获取 oat？
源代码和安装说明在 GitHub 上：https://github.com/knadh/oat

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目