零依赖 · 无需构建 · 原生 Web Components

轻量 UI 工具包
为个人站点而生

基于原生 Web Components，OKLCH 动态主题系统，45 个开箱即用的组件。直接 <script src> 加载，无框架绑定，适合博客、作品集和展示型网站。

开始使用查看文档

npm install @mar7th/march7th-ui

Web Components

外部依赖

133KB

完整包（minified）

OKLCH

色彩空间

ISC

开源许可

核心特性

开箱即用，按需裁剪，随项目一起演化

⚡

零依赖

纯原生 Web Components，无 React / Vue / Svelte 等框架绑定，在任何 HTML 页面中 script 标签加载即用。

🎨

OKLCH 动态主题

基于 OKLCH 色彩空间，单一 --m7-hue 变量驱动全局色相。亮色 / 暗色 / 跟随系统三态切换，颜色自动适配。

📦

按需裁剪

通过 Builder 可视化选择组件，生成精简的定制包。典型博客仅需全量的 20–40%，无需打包工具参与。

✏️

双重写法

Web Components 标签适合静态页面，CSS 类写法适合框架模板循环。同一套设计语言，两种使用姿势。

♿

无障碍支持

交互组件内置完整 ARIA 属性、焦点陷阱和键盘导航，modal / drawer / select 均符合 WAI-ARIA 规范。

🔧

设计 Token 体系

完整的 CSS 变量层（间距、圆角、阴影、动画、断点），可独立引入 tokens 为现有项目提供统一的设计基础。

三行代码，全部就绪

引入 CSS 和 JS 文件后，所有 45 个组件立即可用。不需要 npm install，不需要构建步骤，复制粘贴即可运行。

生产环境建议使用 Builder 生成仅包含所需组件的定制包，将脚本体积缩减 60–80%。

完整安装指南自定义软件包

<!-- 1. 引入设计 Token 和组件样式 -->
<link rel="stylesheet"
  href="src/march7th-tokens.css">
<link rel="stylesheet"
  href="src/march7th-ui.css">

<!-- 2. 引入主题运行时（主题切换需要） -->
<script src="src/march7th-theme.js"></script>

<!-- 3. 引入全部组件 -->
<script src="src/march7th-components.js"
  defer></script>

<!-- 使用组件 -->
<m7-theme-switch></m7-theme-switch>
<m7-input label="邮箱" type="email"></m7-input>
<m7-toast></m7-toast>