diff --git a/package.json b/package.json
index 54ccc35..00148b7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "prettier": "^2.8.4",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
+    "vite-plugin-vitepress-demo": "2.0.0-alpha.8",
     "vitepress": "1.0.0-alpha.47",
     "vitest": "^0.28.5"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3048cd..a4ed3ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,10 @@ specifiers:
   prettier: ^2.8.4
   typescript: ^4.9.5
   vite: ^4.1.1
+  vite-plugin-vitepress-demo: 2.0.0-alpha.8
   vitepress: 1.0.0-alpha.47
   vitest: ^0.28.5
-  vue: ^3.2.47
+  vue: ^3.2.0
 
 dependencies:
   vue: 3.2.47
@@ -35,6 +36,7 @@ devDependencies:
   prettier: 2.8.4
   typescript: 4.9.5
   vite: 4.1.1_@types+node@18.13.0
+  vite-plugin-vitepress-demo: 2.0.0-alpha.8_swexselz56x4db7bjlou2nhtvm
   vitepress: 1.0.0-alpha.47_@types+node@18.13.0
   vitest: 0.28.5
 
@@ -1549,6 +1551,14 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /anymatch/3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
     dev: true
@@ -1620,6 +1630,11 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /binary-extensions/2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /body-scroll-lock/4.0.0-beta.0:
     resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
     dev: true
@@ -1748,6 +1763,21 @@ packages:
     resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
     dev: true
 
+  /chokidar/3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /ci-info/3.8.0:
     resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
     engines: {node: '>=8'}
@@ -2692,6 +2722,15 @@ packages:
       is-callable: 1.2.7
     dev: true
 
+  /fs-extra/10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-extra/11.1.0:
     resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
     engines: {node: '>=14.14'}
@@ -3021,6 +3060,13 @@ packages:
       has-bigints: 1.0.2
     dev: true
 
+  /is-binary-path/2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
@@ -3084,6 +3130,10 @@ packages:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
     dev: true
 
+  /is-json/2.0.1:
+    resolution: {integrity: sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==}
+    dev: true
+
   /is-negative-zero/2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
     engines: {node: '>= 0.4'}
@@ -3281,6 +3331,12 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
+  /linkify-it/4.0.1:
+    resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+
   /lint-staged/13.1.2:
     resolution: {integrity: sha512-K9b4FPbWkpnupvK3WXZLbgu9pchUJ6N7TtVZjbaPsoizkqFUDkUReUL25xdrCljJs7uLUF3tZ7nVPeo/6lp+6w==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -3420,6 +3476,13 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /magic-string/0.26.7:
+    resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /make-error/1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
     dev: true
@@ -3434,6 +3497,17 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /markdown-it/13.0.1:
+    resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 3.0.1
+      linkify-it: 4.0.1
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+
   /mdast-util-from-markdown/0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
     dependencies:
@@ -3450,6 +3524,10 @@ packages:
     resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
     dev: true
 
+  /mdurl/1.0.1:
+    resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
+    dev: true
+
   /meow/8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -3820,6 +3898,20 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /posthtml-parser/0.11.0:
+    resolution: {integrity: sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      htmlparser2: 7.2.0
+    dev: true
+
+  /posthtml-render/3.0.0:
+    resolution: {integrity: sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==}
+    engines: {node: '>=12'}
+    dependencies:
+      is-json: 2.0.1
+    dev: true
+
   /preact/10.12.1:
     resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
     dev: true
@@ -3902,6 +3994,13 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /readdirp/3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
   /redent/3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -4441,6 +4540,10 @@ packages:
     hasBin: true
     dev: true
 
+  /uc.micro/1.0.6:
+    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
+    dev: true
+
   /ufo/1.0.1:
     resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
     dev: true
@@ -4520,6 +4623,23 @@ packages:
       - terser
     dev: true
 
+  /vite-plugin-vitepress-demo/2.0.0-alpha.8_swexselz56x4db7bjlou2nhtvm:
+    resolution: {integrity: sha512-hDyxdZ1K295YXvxchwu3ULzs61ESY6VmA2t1TIKbZrA4ZyCrc3C8wKXVJIwh5/xANbK9aoErSV5L6BbPIiGUtQ==}
+    peerDependencies:
+      vitepress: ^1.0.0-alpha.20
+      vue: ^3.2.0
+    dependencies:
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      fs-extra: 10.1.0
+      magic-string: 0.26.7
+      markdown-it: 13.0.1
+      posthtml-parser: 0.11.0
+      posthtml-render: 3.0.0
+      vitepress: 1.0.0-alpha.47_@types+node@18.13.0
+      vue: 3.2.47
+    dev: true
+
   /vite/4.1.1_@types+node@18.13.0:
     resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/site/.vitepress/config.ts b/site/.vitepress/config.ts
index d15abcd..c990df7 100644
--- a/site/.vitepress/config.ts
+++ b/site/.vitepress/config.ts
@@ -1,5 +1,11 @@
 import { defineConfig } from 'vitepress'
+import { getNav } from './config/nav'
+import { getSidebar } from './config/sidebar'
 
 export default defineConfig({
-  title: 'vue3组件库站点'
+  title: 'vue3组件库站点',
+  themeConfig: {
+    nav: getNav(),
+    sidebar: getSidebar()
+  }
 })
diff --git a/site/.vitepress/config/nav.ts b/site/.vitepress/config/nav.ts
new file mode 100644
index 0000000..2fed817
--- /dev/null
+++ b/site/.vitepress/config/nav.ts
@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const getNav = (): DefaultTheme.NavItem[] => {
+  return [
+    {
+      text: '组件',
+      link: '/components/'
+    }
+  ]
+}
diff --git a/site/.vitepress/config/sidebar.ts b/site/.vitepress/config/sidebar.ts
new file mode 100644
index 0000000..ef5bc9b
--- /dev/null
+++ b/site/.vitepress/config/sidebar.ts
@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const getSidebar = (): DefaultTheme.Sidebar => {
+  return [
+    {
+      text: 'Button 按钮',
+      link: '/components/button/'
+    }
+  ]
+}
diff --git a/site/.vitepress/theme/index.ts b/site/.vitepress/theme/index.ts
new file mode 100644
index 0000000..486972a
--- /dev/null
+++ b/site/.vitepress/theme/index.ts
@@ -0,0 +1,12 @@
+import type { Theme } from 'vitepress'
+// eslint-disable-next-line import/no-named-as-default
+import DefaultTheme from 'vitepress/theme'
+import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp?.(ctx)
+    ctx.app.component('Demo', AntdTheme)
+  }
+} as Theme
diff --git a/site/components/button/index.md b/site/components/button/index.md
new file mode 100644
index 0000000..eec06c7
--- /dev/null
+++ b/site/components/button/index.md
@@ -0,0 +1,9 @@
+# Button 按钮
+
+按钮用于开始一个即时操作。
+
+
+## 演示例子
+
+
+<demo src="../../demos/button/basic.vue"></demo>
diff --git a/site/demos/button/basic.vue b/site/demos/button/basic.vue
new file mode 100644
index 0000000..69fb3e7
--- /dev/null
+++ b/site/demos/button/basic.vue
@@ -0,0 +1,16 @@
+<docs>
+---
+title: 基础按钮
+---
+
+这是一个Button的基础按钮
+
+</docs>
+
+<script lang="ts" setup></script>
+
+<template>
+  <div>按钮</div>
+</template>
+
+<style scoped></style>
diff --git a/site/vite.config.ts b/site/vite.config.ts
index cb6165c..5f3bce3 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
+import { VitePluginVitepressDemo } from 'vite-plugin-vitepress-demo'
 
 export default defineConfig({
-  plugins: [vueJsxPlugin()]
+  plugins: [
+    vueJsxPlugin(),
+    VitePluginVitepressDemo({
+      glob: ['**/demos/**/*.vue']
+    })
+  ]
 })