diff --git a/.changeset/honest-coats-return.md b/.changeset/honest-coats-return.md
new file mode 100644
index 0000000..a610564
--- /dev/null
+++ b/.changeset/honest-coats-return.md
@@ -0,0 +1,5 @@
+---
+'vue-nice-modal': patch
+---
+
+update docs
diff --git a/packages/vue-nice-modal/README.md b/packages/vue-nice-modal/README.md
new file mode 100644
index 0000000..8bd600a
--- /dev/null
+++ b/packages/vue-nice-modal/README.md
@@ -0,0 +1,228 @@
+# Vue Nice Modal
+
+vue-nice-modal is a utility library that converts Vue.js modal components into a Promise-based API.
+
+Inspired By [@ebay/nice-modal-react](https://github.com/eBay/nice-modal-react) and [vant](https://github.com/youzan/vant).
+
+Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
+
+English | [简体中文](https://github.com/worldzhao/vue-nice-modal/blob/main/README.zh-CN.md)
+
+## Examples
+
+You can see a list of examples at: `examples/*` folder.
+
+## Install
+
+```bash
+npm install vue-nice-modal
+# or
+yarn add vue-nice-modal
+# or
+pnpm add vue-nice-modal
+```
+
+## Usage
+
+```javascript
+import { create } from 'vue-nice-modal';
+import MyModal from './MyModal.vue';
+
+const myModal = create(MyModal);
+
+myModal
+  .show({
+    title: 'Hello, world!',
+    content: 'This is a nice modal.',
+  })
+  .then((result) => {
+    console.log('Confirmed! Result:', result);
+  })
+  .catch((error) => {
+    console.error('Rejected! Error:', error);
+  });
+```
+
+## Create Your Modal Component
+
+```vue
+<script setup lang="ts">
+import { Dialog } from 'vant';
+import { INiceModalHandlers } from 'vue-nice-modal';
+// inject hide/remove/callback methods by vue-nice-modal
+interface IProps extends INiceModalHandlers<number> {
+  visible: boolean;
+  // props you need
+  title: string;
+  content: string;
+}
+
+interface IEmits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const props = defineProps<IProps>();
+
+// @ts-ignore
+const emit = defineEmits<IEmits>();
+
+const handleCancel = () => {
+  props.hide(); // or emit('update:visible', false)
+  props.callback('cancel'); // reject the promise
+};
+
+const handleConfirm = async () => {
+  // mock async function call
+  const sleep = (ms: number): Promise<number> =>
+    new Promise((res) =>
+      setTimeout(() => {
+        res(ms);
+      }, ms)
+    );
+
+  const payload = await sleep(1000);
+
+  // resolve the promise with payload
+  props.callback('confirm', payload);
+};
+</script>
+
+<template>
+  <Dialog
+    :show="visible"
+    @update:show="$emit('update:visible', false)"
+    @cancel="handleCancel"
+    @confirm="handleConfirm"
+    @closed="remove"
+    :title="title"
+    :content="content"
+    show-cancel-button
+    class="demo-dialog"
+  >
+    <div>Hello,Vue Nice Modal</div>
+  </Dialog>
+</template>
+```
+
+<details>
+<summary>Click to expand for detailed explanation</summary>
+
+This section provides an example of how to create a custom modal component using the vue-nice-modal library. The example uses the Dialog component from the vant UI library as an example, but you can use any custom modal component that you prefer.
+
+To create your own modal component, you need to define an interface that extends the INiceModalHandlers interface. This interface should include any props that are relevant for your modal component, such as a title prop and a content prop. You can also include any additional props or methods that you need for your component.
+
+In the example, the visible prop and the update:visible event are injected into the custom modal component by vue-nice-modal. These are used to control the visibility of the modal component. The visible prop should be a Boolean that determines whether the modal is visible or not, and the update:visible event should be emitted when the visibility of the modal changes.
+
+The hide(), remove(), and callback() methods are also injected into the custom modal component by vue-nice-modal. These methods are used to hide or remove the modal component, and to handle the user's confirmation or cancellation of the modal.
+
+Once you have defined your custom modal component, you can use the create() function provided by vue-nice-modal to create a Modal object that exposes the show(), hide(), and remove() methods. You can then use the show() method to display your custom modal component and handle the user's confirmation or cancellation of the modal using the Promise-based API provided by vue-nice-modal.
+
+</details>
+
+## API
+
+### create(Comp: Component): Modal
+
+The create function takes a Vue.js component and returns a Modal object with the following methods:
+
+### show(options: ExtractOptions<ComponentProps<C>>): Promise<any>
+
+Shows the modal component and returns a Promise that resolves if the user confirms the modal, or rejects if the user cancels it.
+
+The options parameter is an object that should contain the props that are relevant to the modal component(Excluding the common properties and methods injected by vue-nice-modal, only include custom properties required by the component itself). The ComponentProps and INiceModalHandlers types are used to ensure that the options object is properly typed and that any errors related to prop usage are caught at compile-time.
+
+Here's how the show method's type hinting is implemented:
+
+```typescript
+type ComponentProps<C extends Component> = C extends new (...args: any) => any
+  ? Omit<
+      InstanceType<C>['$props'],
+      keyof VNodeProps | keyof AllowedComponentProps
+    >
+  : never;
+
+type ExtractOptions<T extends Record<string, any>> = Omit<
+  T,
+  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
+>;
+
+export function create<C extends Component>(Comp: C) {
+  // ...
+
+  const show = (options: ExtractOptions<ComponentProps<C>>) => {
+    // ...
+  };
+
+  return {
+    show,
+    // ...
+  };
+}
+```
+
+### hide(): void
+
+Hides the modal component.
+
+### remove(): void
+
+Removes the modal component from the DOM.
+
+## Types
+
+vue-nice-modal provides some TypeScript type definitions:
+
+### Modal
+
+The Modal interface defines the methods of the object returned by create.
+
+```typescript
+interface Modal {
+  show: (options: ExtractOptions<ComponentProps<C>>) => Promise<any>;
+  hide: () => void;
+  remove: () => void;
+}
+```
+
+### ComponentProps<C extends Component>
+
+The ComponentProps type defines the props of a Vue.js component.
+
+```typescript
+type ComponentProps<C extends Component> = C extends new (...args: any) => any
+  ? Omit<
+      InstanceType<C>['$props'],
+      keyof VNodeData | keyof AllowedComponentProps
+    >
+  : never;
+```
+
+### INiceModalHandlers
+
+The INiceModalHandlers interface defines the methods that are used to handle the user's confirmation or cancellation of the modal.
+
+```typescript
+export interface INiceModalHandlers<T = any> {
+  callback: (action: 'confirm' | 'cancel', payload?: T) => void;
+  remove: () => void;
+  hide: () => void;
+}
+```
+
+> These methods, as well as visible and update:visible event, will be injected into the user's custom modal component, and even if not using Promise-based function calls, related props can be passed in based on v-model(visible and update:visible) to control the visibility of the component. This allows users to control the display and hiding of the modal component in their own preferred way, while also ensuring the flexibility of the vue-nice-modal library
+
+### ExtractOptions<T extends Record<string, any>>
+
+The ExtractOptions type is used to extract the options that are relevant to the modal component(Excluding the common properties and methods injected by vue-nice-modal, only include custom properties required by the component itself).
+
+```typescript
+type ExtractOptions<T extends Record<string, any>> = Omit<
+  T,
+  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
+>;
+```
+
+## Notes
+
+- The modal component must have a visible prop and an update:visible event to control its visibility. Check MyModal.vue for an example.
+- vue-nice-modal adds a root element div.vue-nice-modal-root to the DOM. Make sure the styles are compatible.
diff --git a/packages/vue-nice-modal/README.zh-CN.md b/packages/vue-nice-modal/README.zh-CN.md
new file mode 100644
index 0000000..6da72d1
--- /dev/null
+++ b/packages/vue-nice-modal/README.zh-CN.md
@@ -0,0 +1,228 @@
+# Vue Nice Modal
+
+vue-nice-modal 是一个工具库,可以将 Vue.js 的 modal 组件转换为基于 Promise 的 API。
+
+灵感来源于 [@ebay/nice-modal-react](https://github.com/eBay/nice-modal-react) 和 [vant](https://github.com/youzan/vant)。
+
+支持 Vue 2.x,通过 [vue-demi](https://github.com/vueuse/vue-demi)。
+
+[English](https://github.com/worldzhao/vue-nice-modal/blob/main/README.md) | 简体中文
+
+## Examples
+
+你可以在 examples/\* 文件夹中查看示例。
+
+## 安装
+
+```bash
+npm install vue-nice-modal
+# or
+yarn add vue-nice-modal
+# or
+pnpm add vue-nice-modal
+```
+
+## 使用
+
+```javascript
+import { create } from 'vue-nice-modal';
+import MyModal from './MyModal.vue';
+
+const myModal = create(MyModal);
+
+myModal
+  .show({
+    title: 'Hello, world!',
+    content: 'This is a nice modal.',
+  })
+  .then((result) => {
+    console.log('Confirmed! Result:', result);
+  })
+  .catch((error) => {
+    console.error('Rejected! Error:', error);
+  });
+```
+
+## 自定义 Modal 组件
+
+```vue
+<script setup lang="ts">
+import { Dialog } from 'vant';
+import { INiceModalHandlers } from 'vue-nice-modal';
+// inject hide/remove/callback methods by vue-nice-modal
+interface IProps extends INiceModalHandlers<number> {
+  visible: boolean;
+  // props you need
+  title: string;
+  content: string;
+}
+
+interface IEmits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const props = defineProps<IProps>();
+
+// @ts-ignore
+const emit = defineEmits<IEmits>();
+
+const handleCancel = () => {
+  props.hide(); // or emit('update:visible', false)
+  props.callback('cancel'); // reject the promise
+};
+
+const handleConfirm = async () => {
+  // mock async function call
+  const sleep = (ms: number): Promise<number> =>
+    new Promise((res) =>
+      setTimeout(() => {
+        res(ms);
+      }, ms)
+    );
+
+  const payload = await sleep(1000);
+
+  // resolve the promise with payload
+  props.callback('confirm', payload);
+};
+</script>
+
+<template>
+  <Dialog
+    :show="visible"
+    @update:show="$emit('update:visible', false)"
+    @cancel="handleCancel"
+    @confirm="handleConfirm"
+    @closed="remove"
+    :title="title"
+    :content="content"
+    show-cancel-button
+    class="demo-dialog"
+  >
+    <div>Hello,Vue Nice Modal</div>
+  </Dialog>
+</template>
+```
+
+<details>
+<summary>点击展开详细说明</summary>
+
+本节提供了一个使用 vue-nice-modal 库创建自定义 modal 组件的示例。该示例使用 vant UI 库的 Dialog 组件作为示例,但您可以使用任何自定义 modal 组件。
+
+要创建自己的 modal 组件,您需要定义一个继承 INiceModalHandlers 接口的接口。该接口应包括与您的 modal 组件相关的任何属性,例如标题属性和内容属性。您还可以包括任何其他需要的属性或方法。
+
+在示例中,visible 属性和 update:visible 事件由 vue-nice-modal 注入到自定义 modal 组件中。这些用于控制 modal 组件的可见性。visible 属性应是一个布尔值,用于确定 modal 是可见的还是不可见,update:visible 事件应在 modal 的可见性改变时触发。
+
+hide()、remove() 和 callback() 方法也由 vue-nice-modal 注入到自定义 modal 组件中。这些方法用于隐藏或删除 modal 组件,以及处理用户确认或取消 modal 操作。
+
+一旦您定义了自己的自定义 modal 组件,您可以使用 vue-nice-modal 提供的 create() 函数来创建一个 Modal 对象,该对象公开 show()、hide() 和 remove() 方法。然后,您可以使用 show() 方法显示自定义 modal 组件,并使用 vue-nice-modal 提供的基于 Promise 的 API 处理用户确认或取消 modal 操作。
+
+</details>
+
+## API
+
+### create(Comp: Component): Modal
+
+create 函数接受 Vue.js 组件并返回一个带有以下方法的 Modal 对象:
+
+### show(options: ExtractOptions<ComponentProps<C>>): Promise<any>
+
+显示 modal 组件并返回一个 Promise,如果用户确认 modal 则 resolve,如果用户取消则 reject。
+
+options 参数是一个对象,包含与 modal 组件相关的属性(除去 vue-nice-modal 注入的通用属性与方法，仅包含用户自定义的所需 props)。ComponentProps 和 INiceModalHandlers 类型用于确保 options 对象的类型正确,并在编译时捕获与属性使用相关的任何错误。
+
+以下是 show 方法的类型提示实现:
+
+```typescript
+type ComponentProps<C extends Component> = C extends new (...args: any) => any
+  ? Omit<
+      InstanceType<C>['$props'],
+      keyof VNodeProps | keyof AllowedComponentProps
+    >
+  : never;
+
+type ExtractOptions<T extends Record<string, any>> = Omit<
+  T,
+  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
+>;
+
+export function create<C extends Component>(Comp: C) {
+  // ...
+
+  const show = (options: ExtractOptions<ComponentProps<C>>) => {
+    // ...
+  };
+
+  return {
+    show,
+    // ...
+  };
+}
+```
+
+### hide(): void
+
+隐藏 modal 组件。
+
+### remove(): void
+
+从 DOM 中删除 modal 组件。
+
+## 类型定义
+
+vue-nice-modal 提供了一些 TypeScript 类型定义:
+
+### Modal
+
+Modal 接口定义了 create 返回的对象的方法。
+
+```typescript
+interface Modal {
+  show: (options: ExtractOptions<ComponentProps<C>>) => Promise<any>;
+  hide: () => void;
+  remove: () => void;
+}
+```
+
+### ComponentProps<C extends Component>
+
+ComponentProps 工具泛型用于获取 Vue 组件的属性。
+
+```typescript
+type ComponentProps<C extends Component> = C extends new (...args: any) => any
+  ? Omit<
+      InstanceType<C>['$props'],
+      keyof VNodeData | keyof AllowedComponentProps
+    >
+  : never;
+```
+
+### INiceModalHandlers
+
+INiceModalHandlers 接口定义了用于处理用户确认或取消 modal 的方法。
+
+```typescript
+export interface INiceModalHandlers<T = any> {
+  callback: (action: 'confirm' | 'cancel', payload?: T) => void;
+  remove: () => void;
+  hide: () => void;
+}
+```
+
+> 这些方法以及 visible 和 update:visible 事件将被注入用户的自定义 modal 组件中,即使不使用基于 Promise 的函数调用,相关属性也可以通过 v-model(visible 和 update:visible)传递从而控制组件的可见性。这允许用户按自己喜欢的方式控制 modal 组件的显示和隐藏,同时也确保了 vue-nice-modal 库的灵活性。
+
+### ExtractOptions<T extends Record<string, any>>
+
+ExtractOptions 类型用于提取与 modal 组件相关的选项（除去 vue-nice-modal 注入的通用属性与方法）。
+
+```typescript
+type ExtractOptions<T extends Record<string, any>> = Omit<
+  T,
+  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
+>;
+```
+
+## 注意
+
+- modal 组件必须具有 visible 属性和 update:visible 事件以控制其可见性。请参阅 MyModal.vue 作为示例。
+- vue-nice-modal 会在 DOM 中添加一个根元素 div.vue-nice-modal-root。请确保样式兼容。
diff --git a/packages/vue-nice-modal/package.json b/packages/vue-nice-modal/package.json
index 29d165c..7779bb6 100644
--- a/packages/vue-nice-modal/package.json
+++ b/packages/vue-nice-modal/package.json
@@ -2,6 +2,27 @@
   "name": "vue-nice-modal",
   "version": "1.0.0",
   "private": false,
+  "description": "Utility library that converts Vue.js modal components into a Promise-based API",
+  "keywords": [
+    "vue",
+    "vue3",
+    "utility-library",
+    "modal",
+    "vue-composition-api"
+  ],
+  "homepage": "https://github.com/worldzhao/vue-nice-modal#readme",
+  "bugs": {
+    "url": "https://github.com/worldzhao/vue-nice-modal/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/worldzhao/vue-nice-modal.git",
+    "directory": "packages/vue-nice-modal"
+  },
+  "author": {
+    "name": "worldzhao",
+    "email": "1007326924@qq.com"
+  },
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",