diff --git a/docs/docs/react/_category_.json b/docs/docs/react/_category_.json
new file mode 100644
index 0000000..6531e07
--- /dev/null
+++ b/docs/docs/react/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "React",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Installation and usage of React Calendar Heatmap component"
+  }
+}
diff --git a/docs/docs/react/demo.mdx b/docs/docs/react/demo.mdx
new file mode 100644
index 0000000..57f4d16
--- /dev/null
+++ b/docs/docs/react/demo.mdx
@@ -0,0 +1,9 @@
+---
+sidebar_position: 2
+---
+
+# ▶️ Demo
+
+**[⚡️ Play on StackBlitz](https://stackblitz.com/edit/nx-vue-calendar-heatmap-demo)**
+
+<iframe className="embed-iframe" src="https://stackblitz.com/edit/nx-vue-calendar-heatmap-demo?embed=1&file=src/App.vue&hideExplorer=1&hideNavigation=1&view=preview"></iframe>
diff --git a/docs/docs/react/installation.mdx b/docs/docs/react/installation.mdx
new file mode 100644
index 0000000..54c1848
--- /dev/null
+++ b/docs/docs/react/installation.mdx
@@ -0,0 +1,61 @@
+---
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# 📦 Installation
+
+Install the **primary** package using your package manager of choice.
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @ngeenx/nx-react-calendar-heatmap
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @ngeenx/nx-react-calendar-heatmap
+    ```
+  </TabItem>
+</Tabs>
+
+## Peer Dependencies
+
+This library requires **[tippy.js](https://atomiks.github.io/tippyjs/)** and **[luxon](https://moment.github.io/luxon/#/)** (*the successor to Moment.js*) as **peer dependencies**. We are using `tippy.js` for the tooltip and `luxon` for date time manipulation.
+
+Also, we need `@ngeenx/nx-calendar-heatmap-utils` for the calendar heatmap utils.
+
+You can install them using the following commands:
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @ngeenx/nx-calendar-heatmap-utils tippy.js luxon
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @ngeenx/nx-calendar-heatmap-utils tippy.js luxon
+    ```
+  </TabItem>
+</Tabs>
+
+## Types
+
+Optionally, you can install the types for `luxon` using the following commands:
+
+<Tabs groupId="package-managers">
+  <TabItem value="pnpm" label="PNPM" default>
+    ```bash
+pnpm i @types/luxon -D
+    ```
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+    ```bash
+npm i @types/luxon -D
+    ```
+  </TabItem>
+</Tabs>
diff --git a/docs/docs/react/usage-options.mdx b/docs/docs/react/usage-options.mdx
new file mode 100644
index 0000000..a2c3c9c
--- /dev/null
+++ b/docs/docs/react/usage-options.mdx
@@ -0,0 +1,22 @@
+---
+sidebar_position: 4
+---
+
+# 🛠️ Options
+
+You can customize the Calendar Heatmap by providing the following options:
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `HeatMapCalendarType` | **must provide with config** | `WEEKLY`\|`MONTHLY`\|`YEARLY` |
+| `startDate` | `DateTime` | **must provide with config** | The start date of the calendar. |
+| `cellSize` | Number (*as px*) | optional (`15`) | Day cell size (*also you can configure with `overWritedDayStyle` option*) |
+| `colors` | `IHeatmapColor[]` | optional | Heatmap colors for each level range. |
+| `hideEmptyDays` | `Boolean` | optional (`false`) | Empty days (*only start and end end month*) for filler days. |
+| `overWritedDayStyle` | `Object` | optional | Style each day with inline style object. |
+| `heatmapLegend` | `IHeatmapLegend` | optional | Configure `display`, `direction` and `tooltipFormatter` of heatmap calendar legend. |
+| `locale` | `String` | optional (`"en"`) | Specify the locale for the calendar (*weekday and month names*). |
+| `i18n` | `ILocale` | optional | Custom locale for the calendar texts (*min, max, less, more, etc.*). |
+| `tippyProps` | `Props` (*from tippy*) | optional | Tippy.js props for the tooltip. |
+| `tooltip` | `IHeatmapTooltip` | optional | Configure the tooltip for the heatmap (*unit, display state, date format and custom formatter*). |
+| `onClick` | `(day: IHeatmapDay) => void` | optional | Handle click event for each day. |
diff --git a/docs/docs/react/usage.mdx b/docs/docs/react/usage.mdx
new file mode 100644
index 0000000..de6899b
--- /dev/null
+++ b/docs/docs/react/usage.mdx
@@ -0,0 +1,187 @@
+---
+sidebar_position: 3
+---
+
+# 🚀 Usage
+
+Use the following steps to use the Calendar Heatmap in your Vue project.
+
+## Import
+
+Import `NxCalendarHeatmap` component in your component.
+
+```html  title="App.vue"
+<template>
+  <section>
+    <span> Yearly </span>
+
+    // highlight-next-line
+    <NxCalendarHeatmap :options="options" :data="heatmapData">
+      // highlight-next-line
+      <template #footerContent>
+        // highlight-next-line
+        <a href="#"> Footer hint </a>
+      // highlight-next-line
+      </template>
+    // highlight-next-line
+    </NxCalendarHeatmap>
+  </section>
+</template>
+
+<script setup lang="ts">
+// vue
+import { onMounted, ref, watch } from "vue";
+
+// highlight-next-line
+// calendar libs
+// highlight-next-line
+import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
+// highlight-next-line
+import {
+  // highlight-next-line
+  IHeatmapDay,
+  // highlight-next-line
+  HeatMapCalendarType,
+  // highlight-next-line
+  ICalendarHeatmapOptions,
+  // highlight-next-line
+  IHeatmapColor,
+  // highlight-next-line
+  HeatmapLevelsDirection,
+  // highlight-next-line
+} from "@ngeenx/nx-calendar-heatmap-utils";
+// highlight-next-line
+
+// highlight-next-line
+// third party
+// highlight-next-line
+import { DateTime } from "luxon";
+
+// ...
+</script>
+
+<style lang="scss">
+// highlight-next-line
+@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
+// highlight-next-line
+@import "tippy.js/dist/tippy.css";
+</style>
+```
+
+## Data Source
+
+`data` property is an array of `IHeatmapDay` objects. Each object represents a day in the heatmap (*dates must sort in ascending order*).
+
+:::info[Data Source]
+
+Data must be provided by the parent component. There is no internal API call to fetch the data or date ordering features. In this case provided data must cover the selected calendar type and day order.
+
+:::
+
+```html  title="App.vue"
+<template>
+  <section>
+    <span> Yearly </span>
+
+    <NxCalendarHeatmap :options="options" :data="heatmapData">
+      <template #footerContent>
+        <a href="#"> Footer hint </a>
+      </template>
+    </NxCalendarHeatmap>
+  </section>
+</template>
+
+<script setup lang="ts">
+// vue
+import { onMounted, ref, watch } from "vue";
+
+// calendar libs
+// highlight-next-line
+import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
+// highlight-next-line
+import {
+  // highlight-next-line
+  IHeatmapDay,
+  // highlight-next-line
+  HeatMapCalendarType,
+  // highlight-next-line
+  ICalendarHeatmapOptions,
+  // highlight-next-line
+  IHeatmapColor,
+  // highlight-next-line
+  HeatmapLevelsDirection,
+  // highlight-next-line
+} from "@ngeenx/nx-calendar-heatmap-utils";
+
+// third party
+import { DateTime } from "luxon";
+
+// highlight-next-line
+const startDate = ref(DateTime.now().startOf("year"));
+// highlight-next-line
+const heatmapData = ref<IHeatmapDay[]>([]);
+
+// highlight-next-line
+const options = ref<ICalendarHeatmapOptions>({
+  // highlight-next-line
+  type: HeatMapCalendarType.YEARLY,
+  // highlight-next-line
+  startDate: startDate.value,
+  // highlight-next-line
+  onClick: onDayClick,
+// highlight-next-line
+});
+
+// ...
+
+const generateHeatmapData = (startDate: DateTime) => {
+  let endDate: DateTime = startDate.endOf("year");
+
+  const daysBetween = Math.floor(endDate.diff(startDate, "days").days);
+  const heatmap = [];
+
+  let currentDate = startDate;
+
+  for (let i = 0; i <= daysBetween; i++) {
+    const day: IHeatmapDay = {
+      date: currentDate,
+      count: Math.floor(Math.random() * 101),
+    };
+
+    heatmap.push(day);
+
+    currentDate = currentDate.plus({ days: 1 });
+  }
+
+  return heatmap;
+};
+
+// highlight-next-line
+const onDayClick = (day: IHeatmapDay) => {
+  // highlight-next-line
+  console.log(`Clicked on ${day.date} with value ${day.count}`);
+// highlight-next-line
+};
+
+// ...
+
+// highlight-next-line
+onMounted(() => {
+  // highlight-next-line
+  heatmapData.value = generateHeatmapData(startDate.value);
+// highlight-next-line
+});
+</script>
+
+<style lang="scss">
+@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
+@import "tippy.js/dist/tippy.css";
+</style>
+```
+
+
+:::note
+
+`generateHeatmapData` is a helper function to generate random data for the heatmap. You can replace this function with your own data source.
+
+:::
diff --git a/docs/docs/vue/_category_.json b/docs/docs/vue/_category_.json
index 83a4f90..8d84a01 100644
--- a/docs/docs/vue/_category_.json
+++ b/docs/docs/vue/_category_.json
@@ -3,6 +3,6 @@
   "position": 2,
   "link": {
     "type": "generated-index",
-    "description": "Installation and usage of Angular Calendar Heatmap component"
+    "description": "Installation and usage of Vue Calendar Heatmap component"
   }
 }
diff --git a/libs/features/nx-react-calendar-heatmap/vite.config.ts b/libs/features/nx-react-calendar-heatmap/vite.config.ts
index c896e3d..a2ad25f 100644
--- a/libs/features/nx-react-calendar-heatmap/vite.config.ts
+++ b/libs/features/nx-react-calendar-heatmap/vite.config.ts
@@ -1,22 +1,22 @@
 /// <reference types='vitest' />
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import * as path from 'path';
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import * as path from "path";
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import { nxCopyAssetsPlugin } from "@nx/vite/plugins/nx-copy-assets.plugin";
 
 export default defineConfig({
   root: __dirname,
   cacheDir:
-    '../../../node_modules/.vite/libs/features/nx-react-calendar-heatmap',
+    "../../../node_modules/.vite/libs/features/nx-react-calendar-heatmap",
   plugins: [
     react(),
     nxViteTsPaths(),
-    nxCopyAssetsPlugin(['*.md']),
+    nxCopyAssetsPlugin(["*.md"]),
     dts({
-      entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      entryRoot: "src",
+      tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
     }),
   ],
   // Uncomment this if you are using workers.
@@ -26,7 +26,7 @@ export default defineConfig({
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
-    outDir: '../../../dist/libs/features/nx-react-calendar-heatmap',
+    outDir: "../../../dist/libs/features/nx-react-calendar-heatmap",
     emptyOutDir: true,
     reportCompressedSize: true,
     commonjsOptions: {
@@ -34,28 +34,34 @@ export default defineConfig({
     },
     lib: {
       // Could also be a dictionary or array of multiple entry points.
-      entry: 'src/index.ts',
-      name: 'nx-react-calendar-heatmap',
-      fileName: 'index',
+      entry: "src/index.ts",
+      name: "nx-react-calendar-heatmap",
+      fileName: "index",
       // Change this to the formats you want to support.
       // Don't forget to update your package.json as well.
-      formats: ['es', 'cjs'],
+      formats: ["es", "cjs"],
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "tippy.js",
+        "luxon",
+      ],
     },
   },
   test: {
     watch: false,
     globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    reporters: ['default'],
+    environment: "jsdom",
+    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    reporters: ["default"],
     coverage: {
       reportsDirectory:
-        '../../../coverage/libs/features/nx-react-calendar-heatmap',
-      provider: 'v8',
+        "../../../coverage/libs/features/nx-react-calendar-heatmap",
+      provider: "v8",
     },
   },
 });
diff --git a/package.json b/package.json
index 14a7e46..4c732eb 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "vue:start": "nx serve vue-app",
     "react:start": "nx serve react-app",
     "vue:build": "nx build nx-vue-calendar-heatmap --skip-nx-cache",
+    "react:build": "nx build nx-react-calendar-heatmap --skip-nx-cache",
     "utils:test": "nx test nx-calendar-heatmap-utils",
     "utils:build": "nx build nx-calendar-heatmap-utils --skip-nx-cache && nx run nx-calendar-heatmap-utils:tailwind-build",
     "lint:all": "nx run-many --all --target=lint",