产品简介
shadcn-calendar-heatmap 这是一个基于react-day-picker的日历热图组件，遵循shadcn/ui设计模式，允许开发者使用Tailwind CSS轻松自定义样式。它支持多种数据输入模式，如日期数组或带权重的日期，可用于展示GitHub贡献图、温度变化等时间序列数据。适合需要快速集成数据可视化功能的React开发者和UI工程师。
核心功能
- 完全可自定义样式：使用Tailwind CSS类进行灵活定制
- 多种数据模式：支持直接日期数组或带权重的日期，自动分类显示
- 多月份显示：可配置显示任意数量的月份
- 无障碍访问：基于react-day-picker，支持完整键盘导航
- TypeScript类型安全：提供完整类型定义，减少错误
- 预设热图变体：内置GitHub streaks、温度热图、彩虹颜色等预设
快速开始
- 第一步：安装依赖包，运行 npm install react-day-picker date-fns lucide-react
- 第二步：复制 components/ui/calendar-heatmap.tsx 文件到项目的组件目录
- 第三步：确保项目中有 cn 工具函数（标准shadcn/ui项目通常包含）
- 第四步：在React组件中导入CalendarHeatmap，并配置variantClassnames和日期数据属性
界面预览
与其他方案对比
| 对比项 | shadcn-calendar-heatmap | 同类方案 |
|---|---|---|
| 可自定义性 | 完全支持Tailwind CSS类样式，高度灵活 | 原始React热图组件样式通常固定或自定义选项有限 |
| 数据模式支持 | 支持日期数组和带权重的日期，自动分类显示 | 多数热图组件只支持单一数据格式，需手动处理 |
| 可访问性 | 内置完整键盘导航，基于react-day-picker确保无障碍 | 许多热图组件缺乏内置可访问性支持 |
适合谁用
- 需要展示GitHub贡献图或用户活跃度数据的前端开发者
- 构建数据仪表板，显示时间序列热图的数据分析师或产品经理
- 使用Tailwind CSS和shadcn/ui设计系统，追求一致UI风格的UI工程师
- 开发天气、健康等应用，需要热图展示温度或活动数据的程序员
下载与版本
当前最新版本为 main，发布于 。支持 Windows、macOS、Linux。
⚠️ 注意：本项目仅提供源代码下载，不包含可直接运行的安装包（exe/dmg/apk 等。下载后需要自行编译构建才能使用，适合有一定开发经验的用户。如果你不熟悉编译流程，建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用，请遵守相关法律法规。
- 请尊重内容创作者版权，勿将下载内容用于商业或非法传播。
- 项目源码地址：https://github.com/gurbaaz27/shadcn-calendar-heatmap