diff --git a/.gitignore b/.gitignore
index 91dfed8..613fa5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 .DS_Store
-node_modules
\ No newline at end of file
+node_modules
+es
+lib
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..da83ae5
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2023-present Pearmini https://github.com/pearmini
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/README.md b/README.md
index 64092be..9aba816 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # @strawberry-vis/g2-rect
 
-The lightweight React Component for [@antv/g2](https://github.com/antvis/G2).
+The lightweight [React](https://react.dev/) component for [@antv/g2 5.0](https://github.com/antvis/G2).
 
 ## Installing
 
@@ -12,11 +12,13 @@ $ npm install @strawberry-vis/g2-rect
 import React from "react";
 import { Chart } from "@strawberry-vis/g2-rect";
 
-export function Card() {
+export function Demo() {
   return (
     <Chart
       spec={{
         type: "interval",
+        width: 640,
+        height: 480,
         data: [
           { genre: "Sports", sold: 275 },
           { genre: "Strategy", sold: 115 },
@@ -35,8 +37,8 @@ export function Card() {
 
 | Property | Description                                                                                                                                        | Type               | Default |
 | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
-| spec     | the [spec](https://g2.antv.antgroup.com/manual/core/api) for visualization , say `chart.options(spec)`                                             | `G2Spec` \| `null` | -       |
-| options  | the [options](https://g2.antv.antgroup.com/manual/core/chart#%E5%85%A8%E5%B1%80%E9%80%89%E9%A1%B9) for instantiating char, say `G2.Chart(options)` | `ChartOptions`     | -       |
+| spec     | the [spec](https://g2.antv.antgroup.com/manual/core/api) for the visualization , say `chart.options(spec)`                                             | `G2Spec` \| `null` | -       |
+| options  | the [options](https://g2.antv.antgroup.com/manual/core/chart#%E5%85%A8%E5%B1%80%E9%80%89%E9%A1%B9) for instantiating the chart, say `G2.Chart(options)` | `ChartOptions`     | -       |
 | style    | the style of the container                                                                                                                         | `CSSProperties`    | -       |
 | onInit   | the callback called after the chart instantiating                                                                                                  | `Function`         | -       |
 | ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                                                   | `ChartRef`         | -       |
@@ -59,12 +61,12 @@ import { Renderer } from "@antv/g-svg";
 export function Demo() {
   return (
     <Chart
-      // Sets some global options for creating chart.
+      // Set some global options for creating chart.
       options={{
-        autoFit: true, // Fits the container.
-        renderer: new Renderer(), // Renders chart into a SVG node.
+        autoFit: true, // Fit the container.
+        renderer: new Renderer(), // Render the chart into a SVG node.
       }}
-      // Sets the options related to visualization.
+      // Set the options related to charts.
       spec={{
         type: "interval",
         data: [
@@ -101,9 +103,9 @@ export function Demo() {
   );
 
   useEffect(() => {
-    // Mocks fetch.
+    // Mock the fetch delay.
     setTimeout(() => {
-      // Updates data.
+      // Update the data.
       setData([
         { genre: "Sports", sold: 275 },
         { genre: "Strategy", sold: 115 },
@@ -131,12 +133,12 @@ export function Demo() {
   function onInit() {
     const chart = chartRef.current;
 
-    // Listens input events.
+    // Listen input events.
     chart.on("plot:mouseover", () => {});
 
-    // Listens lifecycle events.
+    // Listen lifecycle events.
     chart.on(ChartEvent.AFTER_RENDER, () => {
-      // Emits to init the state of highlight interaction.
+      // Emit to init the state of highlight interaction.
       chart.emit("element:highlight", {
         data: {
           data: { genre: "Sports" },
@@ -155,7 +157,7 @@ export function Demo() {
 import React, { useRef, useEffect } from "react";
 import { register } from "@antv/g2";
 
-// Registers a triangle shape for interval globally.
+// Register a triangle shape for interval globally.
 register("shape.interval.triangle", (style, context) => {
   const { document } = context;
   return (P, value, defaults) => {
@@ -191,7 +193,7 @@ export function Demo() {
         encode: {
           x: "genre",
           y: "sold",
-          shape: "triangle", // Uses the custom shape.
+          shape: "triangle", // Use the custom shape.
         },
       }}
     />
diff --git a/package.json b/package.json
index 7b24ab7..906bb82 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,32 @@
 {
   "name": "@strawberry-vis/g2-rect",
-  "version": "0.0.1",
+  "version": "0.0.1-beta.0",
   "description": "The lightweight React Component for @antv/g2.",
-  "main": "index.js",
-  "scripts": {
-    "dev": "vite dev"
-  },
   "author": {
     "name": "pearmini",
     "url": "https://github.com/pearmini"
   },
   "license": "ISC",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/strawberry-vis/g2-react"
+  },
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "npm run build:lib && npm run build:es",
+    "build:lib": "rm -rf lib && tsc --module commonjs --outDir lib",
+    "build:es": "rm -rf es && tsc --module esnext --outDir es",
+    "prepublishOnly": "npm run build"
+  },
+  "sideEffects": false,
   "dependencies": {
     "@antv/g2": "^5.0.22",
     "react": "^18.2.0"
@@ -21,6 +37,7 @@
     "@types/react-dom": "^18.2.7",
     "jsdom": "^22.1.0",
     "react-dom": "^18.2.0",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c3185b8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "jsxFactory": "React.createElement",
+    "jsxFragmentFactory": "React.Fragment",
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "noImplicitAny": true,
+    "target": "es6",
+    "lib": ["dom", "es2017"],
+    "skipLibCheck": true,
+    "stripInternal": true,
+    "declaration": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "lib", "es"]
+}