diff --git a/jest.config.base.js b/jest.config.base.js
index e0293edf..61e19901 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -16,6 +16,7 @@ module.exports = {
       '<rootDir>/packages/macos-traffic-light/src',
     '@arvinxu/journey-map': '<rootDir>/packages/journey-map/src',
     '@arvinxu/user-panel': '<rootDir>/packages/user-panel/src',
+    '@arvinxu/heatmap-calendar': '<rootDir>/packages/heatmap-calendar/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',
diff --git a/packages/heatmap-calendar/.fatherrc.js b/packages/heatmap-calendar/.fatherrc.js
new file mode 100644
index 00000000..87f204d0
--- /dev/null
+++ b/packages/heatmap-calendar/.fatherrc.js
@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};
diff --git a/packages/heatmap-calendar/README.md b/packages/heatmap-calendar/README.md
new file mode 100644
index 00000000..948af007
--- /dev/null
+++ b/packages/heatmap-calendar/README.md
@@ -0,0 +1,14 @@
+# @arvinxu/heatmap-calendar
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+## License
+
+[MIT](../../LICENSE) ® Arvin Xu
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/heatmap-calendar.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/heatmap-calendar
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/heatmap-calendar.svg
+[download-url]: https://npmjs.org/package/@arvinxu/heatmap-calendar
diff --git a/packages/heatmap-calendar/jest.config.js b/packages/heatmap-calendar/jest.config.js
new file mode 100644
index 00000000..62bb7068
--- /dev/null
+++ b/packages/heatmap-calendar/jest.config.js
@@ -0,0 +1,14 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/heatmap-calendar';
+
+const root = '<rootDir>/packages/heatmap-calendar';
+
+module.exports = {
+  ...base,
+  rootDir: '../..',
+  roots: [root],
+  name: packageName,
+  displayName: packageName,
+  collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};
diff --git a/packages/heatmap-calendar/package.json b/packages/heatmap-calendar/package.json
new file mode 100644
index 00000000..fb4012f7
--- /dev/null
+++ b/packages/heatmap-calendar/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@arvinxu/heatmap-calendar",
+  "version": "1.0.0",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/heatmap-calendar#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "father-build && yarn webpack",
+    "webpack": "webpack",
+    "test": "jest",
+    "test:update": "jest -u",
+    "prepublishOnly": "yarn build",
+    "cov": "jest --coverage",
+    "clean": "rm -rf es lib dist build coverage .umi"
+  }
+}
diff --git a/packages/heatmap-calendar/src/index.tsx b/packages/heatmap-calendar/src/index.tsx
new file mode 100644
index 00000000..4f6ada62
--- /dev/null
+++ b/packages/heatmap-calendar/src/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FC } from 'react';
+
+export interface HeatmapCalendarProps {}
+
+const HeatmapCalendar: FC<HeatmapCalendarProps> = () => {
+  return <div>HeatmapCalendar</div>;
+};
+
+export default HeatmapCalendar;
diff --git a/packages/heatmap-calendar/tests/index.test.tsx b/packages/heatmap-calendar/tests/index.test.tsx
new file mode 100644
index 00000000..a7ae33d4
--- /dev/null
+++ b/packages/heatmap-calendar/tests/index.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import HeatmapCalendar from '@arvinxu/heatmap-calendar';
+
+describe('HeatmapCalendar', () => {
+  it('默认状态', () => {
+    const { container } = render(<HeatmapCalendar />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/heatmap-calendar/tsconfig.json b/packages/heatmap-calendar/tsconfig.json
new file mode 100644
index 00000000..b61bb516
--- /dev/null
+++ b/packages/heatmap-calendar/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    /* babel 输出类型 */
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /* 模块导入配置项 */
+    "esModuleInterop": true,
+    "types": ["../../types", "@types/jest"]
+  }
+}
diff --git a/packages/heatmap-calendar/webpack.config.js b/packages/heatmap-calendar/webpack.config.js
new file mode 100644
index 00000000..c4230cb7
--- /dev/null
+++ b/packages/heatmap-calendar/webpack.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const config = require('../../webpack.config');
+
+module.exports = {
+  ...config,
+  output: {
+    ...config.output,
+    library: 'HeatmapCalendar',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};
diff --git a/tsconfig.json b/tsconfig.json
index b751c0f7..88275033 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,8 @@
       "@arvinxu/journey-map/*": ["./packages/journey-map/src/*"],
       "@arvinxu/user-panel": ["./packages/user-panel/src"],
       "@arvinxu/user-panel/*": ["./packages/user-panel/src/*"],
+      "@arvinxu/heatmap-calendar": ["./packages/heatmap-calendar/src"],
+      "@arvinxu/heatmap-calendar/*": ["./packages/heatmap-calendar/src/*"],
       "@arvinxu/float-label-input": ["./packages/float-label-input/src"],
       "@arvinxu/page-loading": ["./packages/page-loading/src"],
       "@arvinxu/mindflow": ["./packages/mindflow/src"],