R
数据展示GitHubActivity热力图仓库排行展开面板

贡献热力图

贡献热力图加一张可展开的底部面板，用来给你的贡献最多的仓库排名。

1809 contributions in 2026

贡献最多的仓库
  • sswamimalode07/rare-ui412
  • sswamimalode07/portfolio188
  • sswamimalode07/motion-lab96

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/github-activity.tsx。

npx shadcn@latest add swamimalode07/rare-ui/github-activity

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

github-activity.tsx
import { GitHubActivity } from "@/components/ui/github-activity"


export function Demo() {
  return (
    <GitHubActivity
      username="swamimalode07"
      year={2026}
      accent="#fc4c01"
      months={6}
      cellSize={12}
      label="贡献最多的仓库"
      defaultOpen
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
usernamestring—GitHub 用户名；给了就会拉取真实数据。
contributionsContribution[]—直接传入贡献数据，跳过请求。
reposRepoContribution[]—面板里的仓库排行数据。
yearnumber—统计年份。
accentstring | string[]—热力色，可传渐变色阶。
cellSizenumber11格子尺寸。
monthsnumber—展示的月份数量。
showMonthsbooleantrue是否显示月份标签。
labelstring—面板标题。
defaultOpenbooleanfalse初始展开状态。
openboolean—受控展开状态。
onOpenChange(open: boolean) => void—展开状态回调。