开源 · Apache-2.0 协议

以中国历法为内核的
框架无关 UI 组件库

零依赖的纯 TypeScript组件，原生 DOM 渲染，React / Vue / 原生 HTML 均可使用。内置 1900-2100 年农历引擎，精准节气与节日计算。

8

核心组件

0

运行时依赖

30k

日历包体积

2100

历法覆盖年份

零依赖

纯 TypeScript + 原生 DOM，无框架绑定，精确 tree-shaking，ESM/CJS 双格式输出。

中国历法引擎

自研农历算法，覆盖 1900-2100 年。节气、干支、宜忌、休假日历开箱即用。

框架无关

React、Vue、Svelte、原生 HTML —— 同一套 API，同一套样式，自由组合。

无障碍优先

ARIA 语义完整、全键盘导航、prefers-reduced-motion 感知，为每一位用户设计。

所有组件

Button 按钮稳定

药丸风格按钮，默认 / 主色 / 琥珀 / 图标四变体

Carousel 轮播图新

左侧大图 + 右侧文案 + 底部缩略图切换

Input 输入框稳定

CSS 流光边框动画 + 简约经典样式

Toast 轻提示稳定

ARIA live region 内建 · 6 种定位 · Promise 链 · 队列管理

Calendar 日历稳定

输入框弹出面板，农历 / 节气 / 节日 / 黄历宜忌

Search 搜索稳定

打字机轮播占位 + 类别筛选 + 全键盘导航

Upload 上传稳定

拖拽 / 按钮触发，WebP / AVIF 客户端压缩

AI Editor 编辑器稳定

AI 辅助 Markdown/WYSIWYG 编辑器

Text Layout 排版稳定

精准文字排版引擎，截断 / 分栏 / 虚拟滚动

Skeleton 骨架新

自动 DOM 测量骨架屏，零布局重复，SSR 可选

快速开始

选择需要的组件，独立安装使用。所有组件都是可选的，不会引入不需要的代码。

# 安装日历组件
npm install @qingwu-ui/calendar

// 在代码中使用
import { Calendar } from "@qingwu-ui/calendar";
import "@qingwu-ui/calendar/style.css";

const cal = new Calendar(el, {
  placeholder: "选择日期",
  onChange: (date) => console.log(date),
});