diff --git a/.dumi/global.css b/.dumi/global.css
new file mode 100644
index 00000000..8ce3d187
--- /dev/null
+++ b/.dumi/global.css
@@ -0,0 +1,5 @@
+.markdown ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+  list-style-type: circle;
+}
diff --git a/.dumi/theme/slots/Footer.tsx b/.dumi/theme/slots/Footer.tsx
deleted file mode 100644
index 4528f4e8..00000000
--- a/.dumi/theme/slots/Footer.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default () => {
-  // return <Footer bottom={'自定义'} columns={[]} />;
-  return <></>;
-};
diff --git a/.dumirc.ts b/.dumirc.ts
index cd4321d6..15a5672a 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -4,6 +4,10 @@ export default defineConfig({
   outputPath: 'docs-dist',
   themeConfig: {
     name: 'Banana UI',
+    footer: false,
+    socialLinks: {
+      github: 'https://github.com/FriedRiceNoodles/banana-ui',
+    },
   },
   publicPath: '/banana-ui/',
   base: '/banana-ui/',
diff --git a/README.md b/README.md
index 06101c8a..ab55ed1a 100644
--- a/README.md
+++ b/README.md
@@ -3,35 +3,46 @@
 [![NPM version](https://img.shields.io/npm/v/banana-ui.svg?style=flat)](https://www.npmjs.com/package/@banana-ui/banana)
 [![NPM downloads](http://img.shields.io/npm/dm/banana-ui.svg?style=flat)](https://www.npmjs.com/package/@banana-ui/banana)
 
-## Usage
+`Banana UI` 是一套底层基于 `Web Components` 的组件库，它提供了一套常用的组件。
 
-TODO
+官方文档: https://friedricenoodles.github.io/banana-ui/
 
-## Options
+## ⭐️ 特性
 
-TODO
+- 🧩 **可用于任何 Web 框架（React、Vue、以及其他...）**
+- 🌐 **可用于原生环境（无框架）**
+- 🚀 **支持 SSR（甚至能用于 worker 环境）**
+- 🛡 良好的 TypeScript 支持
+- 📱 适用于 PC 端，移动端也可用
+- 🧪 完善的单元测试
 
-## Development
+## Banana 解决了什么问题？
 
-```bash
-# install dependencies
-$ pnpm install
+Banana 最大的特点是它是一个基于 Web Components 的组件库，这意味着它可以在几乎所有的前端框架中使用，也可以在原生环境（无框架）中使用；并且它还**支持服务端渲染（SSR）**，甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。
 
-# develop library by docs demo
-$ pnpm start
+> Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。
 
-# build library source code
-$ pnpm run build
+基于这点，Banana 适合这些场景：
 
-# build library source code in watch mode
-$ pnpm run build:watch
+- 你正在开发一个需要支持多种框架的组件/插件/工具。
+- 你有多个项目，它们使用不同的前端框架，你希望能够在这些项目中使用相同的组件库。
+- 你开发的项目正在使用模板引擎，而不是前端框架（比如 Shopify、Wordpress 等）。
+- 你开发的项目没有使用前端框架，而是原生环境。
+- React 用户，我们提供了一个 React 版本，它对 React 做了专门的适配，可以更好地和 React 配合使用。
+- 当然，Vue 项目或其他 Web 框架也可以使用 Banana。
 
-# build docs
-$ pnpm run docs:build
+## 寻求帮助 & 参与贡献
 
-# check your project for potential problems
-$ pnpm run doctor
-```
+欢迎任何形式的提问和贡献，你可以在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。
+如果你想参与贡献，希望可以先查看 [贡献指南](/docs/guide/contributing.md)。
+
+## Q & A
+
+### 我可以把它用于生产环境吗？
+
+可以。Banana UI 已经在一些项目中使用。但是请注意，它仍然处于早期阶段，可能会有一些问题。如果你在使用过程中遇到了问题，欢迎在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。
+
+> 作者注：我目前在一个跨境电商公司工作，公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。
 
 ## LICENSE
 
diff --git a/docs/guide/contributing.md b/docs/guide/contributing.md
new file mode 100644
index 00000000..a2b05daf
--- /dev/null
+++ b/docs/guide/contributing.md
@@ -0,0 +1,6 @@
+---
+group: 指南
+order: 9
+---
+
+# 贡献指南
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
index a263ce54..6cdd9a46 100644
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@@ -1,5 +1,38 @@
+---
+group: 指南
+order: 2
+---
+
 # 安装
 
+## 原生环境和非 React 框架
+
+NPM 安装：
+
 ```bash
 npm i @banana-ui/banana
 ```
+
+CDN 引入：
+
+```html
+/* UMD Namespace: Banana */
+<script src="https://cdn.jsdelivr.net/npm/@banana-ui/banana/umd/index.js"></script>
+```
+
+## React
+
+NPM 安装：
+
+```bash
+npm i @banana-ui/react
+```
+
+CDN 引入：
+
+```html
+/* UMD Namespace: BananaReact */
+<script src="https://cdn.jsdelivr.net/npm/@banana-ui/react/umd/index.js"></script>
+```
+
+> 在 React 场景下使用 CDN 引入是不常见的，一般只在配置了[webpack externals](https://webpack.js.org/configuration/externals/)的情况下使用。
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
index 522778e6..c792c984 100644
--- a/docs/guide/introduction.md
+++ b/docs/guide/introduction.md
@@ -1,5 +1,48 @@
 ---
 group: 指南
+order: 0
 ---
 
 # 介绍
+
+`Banana UI` 是一套底层基于 `Web Components` 的组件库，它提供了一套常用的组件。
+
+## ⭐️ 特性
+
+- 🧩 **可用于任何 Web 框架（React、Vue、以及其他...）**
+- 🌐 **可用于原生环境（无框架）**
+- 🚀 **支持 SSR（甚至能用于 worker 环境）**
+- 🛡 良好的 TypeScript 支持
+- 📱 适用于 PC 端，移动端也可用
+- 🧪 完善的单元测试
+
+## Banana 解决了什么问题？
+
+Banana 最大的特点是它是一个基于 Web Components 的组件库，这意味着它可以在几乎所有的前端框架中使用，也可以在原生环境（无框架）中使用；并且它还**支持服务端渲染（SSR）**，甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。
+
+> Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。
+
+基于这点，Banana 适合这些场景：
+
+- 你正在开发一个需要支持多种框架的组件/插件/工具。
+- 你有多个项目，它们使用不同的前端框架，你希望能够在这些项目中使用相同的组件库。
+- 你开发的项目正在使用模板引擎，而不是前端框架（比如 Shopify、Wordpress 等）。
+- 你开发的项目没有使用前端框架，而是原生环境。
+- React 用户，我们提供了一个 React 版本，它对 React 做了专门的适配，可以更好地和 React 配合使用。
+- 当然，Vue 项目或其他 Web 框架也可以使用 Banana。
+
+## 寻求帮助 & 参与贡献
+
+欢迎任何形式的提问和贡献，你可以在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。
+如果你想参与贡献，希望可以先查看 [贡献指南](/guide/contributing.md)。
+
+## Q & A
+
+### 我可以把它用于生产环境吗？
+
+可以。Banana UI 已经在一些项目中使用。但是请注意，它仍然处于早期阶段，可能会有一些问题。如果你在使用过程中遇到了问题，欢迎在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。
+
+> 作者注：我目前在一个跨境电商公司工作，公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。
+
+<br />
+<a href="/guide/quick-start"><b-button type="primary">现在就试试</b-button></a>
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
new file mode 100644
index 00000000..a74028d9
--- /dev/null
+++ b/docs/guide/quick-start.md
@@ -0,0 +1,6 @@
+---
+group: 指南
+order: 1
+---
+
+# 快速上手