diff --git a/build/webpack.dev.js b/build/webpack.dev.js
index f14d56723..5ff32f924 100644
--- a/build/webpack.dev.js
+++ b/build/webpack.dev.js
@@ -67,13 +67,13 @@ module.exports = {
     new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
       chunks: ['vant-docs'],
-      template: 'docs/site/desktop/index.html',
+      template: path.join(__dirname, '../docs/site/desktop/index.html'),
       filename: 'index.html',
       inject: true
     }),
     new HtmlWebpackPlugin({
       chunks: ['vant-mobile'],
-      template: 'docs/site/mobile/index.html',
+      template: path.join(__dirname, '../docs/site/mobile/index.html'),
       filename: 'mobile.html',
       inject: true
     })
diff --git a/docs/site/mobile/App.vue b/docs/site/mobile/App.vue
index decd7229c..ee66a5982 100644
--- a/docs/site/mobile/App.vue
+++ b/docs/site/mobile/App.vue
@@ -53,6 +53,7 @@ export default {
 @import '../../../src/style/var';
 
 body {
+  min-width: 100vw;
   color: @text-color;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
   line-height: 1;
diff --git a/docs/site/mobile/main.js b/docs/site/mobile/main.js
index 2b5a00cfd..0edac1185 100644
--- a/docs/site/mobile/main.js
+++ b/docs/site/mobile/main.js
@@ -1,8 +1,8 @@
 import '../../../src/index.less';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './App';
 import routes from '../router';
+import App from './App';
 import { importAll } from '../utils';
 import '@vant/touch-emulator';
 
diff --git a/package.json b/package.json
index 4ce4b73e0..d8570d667 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.16",
     "@vant/cli": "^1.0.2",
-    "@vant/doc": "^2.4.0",
+    "@vant/doc": "^2.5.1",
     "@vant/eslint-config": "^1.2.5",
     "@vant/markdown-loader": "^2.2.0",
     "@vant/markdown-vetur": "^1.0.0",
diff --git a/packages/vant-doc/README.md b/packages/vant-doc/README.md
new file mode 100644
index 000000000..64a3e83cf
--- /dev/null
+++ b/packages/vant-doc/README.md
@@ -0,0 +1,15 @@
+# Vant Doc
+
+UI components of Vant document site
+
+#### NPM
+
+```shell
+npm i @vant/doc -D
+```
+
+#### YARN
+
+```shell
+yarn add @vant/doc --dev
+```
diff --git a/packages/vant-doc/build/webpack.config.js b/packages/vant-doc/build/webpack.config.js
new file mode 100644
index 000000000..120ffabdc
--- /dev/null
+++ b/packages/vant-doc/build/webpack.config.js
@@ -0,0 +1,22 @@
+const path = require('path');
+const baseWebpackConfig = require('../../../build/webpack.dev');
+
+module.exports = Object.assign(baseWebpackConfig, {
+  mode: 'production',
+  entry: {
+    index: './src/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../lib'),
+    filename: '[name].js',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    vue: {
+      root: 'Vue',
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue'
+    }
+  }
+});
diff --git a/packages/vant-doc/package.json b/packages/vant-doc/package.json
new file mode 100644
index 000000000..5a4bea62e
--- /dev/null
+++ b/packages/vant-doc/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@vant/doc",
+  "version": "2.5.1",
+  "description": "vant document template",
+  "main": "./lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "webpack --progress --config ./build/webpack.config.js",
+    "release": "npm run build && npm publish"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-doc"
+}
diff --git a/packages/vant-doc/src/VanDoc.vue b/packages/vant-doc/src/VanDoc.vue
new file mode 100644
index 000000000..1aefb4b61
--- /dev/null
+++ b/packages/vant-doc/src/VanDoc.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="van-doc">
+    <van-doc-header
+      :lang="lang"
+      :github="github"
+      :versions="versions"
+      :config="config.header"
+      :search-config="searchConfig"
+      @switch-version="$emit('switch-version', $event)"
+    />
+    <van-doc-nav :base="base" :nav-config="config.nav" />
+    <van-doc-container :has-simulator="!!(simulator || simulators.length)">
+      <van-doc-content>
+        <slot />
+      </van-doc-content>
+    </van-doc-container>
+    <van-doc-simulator v-if="simulator" :src="simulator" />
+    <van-doc-simulator
+      v-for="(url, index) in simulators"
+      v-show="index === currentSimulator"
+      :src="url"
+      :key="url"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc',
+
+  props: {
+    lang: String,
+    github: String,
+    versions: Array,
+    searchConfig: Object,
+    currentSimulator: Number,
+    simulator: String,
+    config: {
+      type: Object,
+      required: true
+    },
+    simulators: {
+      type: Array,
+      default: () => []
+    },
+    base: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      nav: [],
+      currentPath: null,
+      leftNav: null,
+      rightNav: null
+    };
+  },
+
+  watch: {
+    // eslint-disable-next-line
+    '$route.path'() {
+      this.setNav();
+      this.updateNav();
+    }
+  },
+
+  created() {
+    this.setNav();
+    this.updateNav();
+    this.keyboardHandler();
+  },
+
+  methods: {
+    setNav() {
+      const { nav } = this.config;
+      for (let i = 0; i < nav.length; i++) {
+        const navItem = nav[i];
+        if (!navItem.groups) {
+          this.nav.push(nav[i]);
+        } else {
+          for (let j = 0; j < navItem.groups.length; j++) {
+            this.nav = this.nav.concat(navItem.groups[j].list);
+          }
+        }
+      }
+    },
+
+    updateNav() {
+      let currentIndex;
+      this.currentPath = '/' + this.$route.path.split('/').pop();
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+      this.leftNav = this.nav[currentIndex - 1];
+      this.rightNav = this.nav[currentIndex + 1];
+    },
+
+    handleNavClick(direction) {
+      const nav = direction === 'prev' ? this.leftNav : this.rightNav;
+      if (nav.path) {
+        this.$router.push(this.base + nav.path);
+      } else if (nav.link) {
+        window.location.href = nav.link;
+      }
+    },
+
+    keyboardHandler() {
+      window.addEventListener('keyup', event => {
+        switch (event.keyCode) {
+          case 37: // left
+            this.handleNavClick('prev');
+            break;
+          case 39: // right
+            this.handleNavClick('next');
+            break;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import './style/index';
+</style>
diff --git a/packages/vant-doc/src/component/Block.vue b/packages/vant-doc/src/component/Block.vue
new file mode 100644
index 000000000..75163ce06
--- /dev/null
+++ b/packages/vant-doc/src/component/Block.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="van-doc-block">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-block'
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-block {
+  display: flex;
+  margin-bottom: 20px;
+
+  .highlight {
+    flex: 1;
+    box-sizing: border-box;
+
+    pre {
+      word-break: break-all;
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/Container.vue b/packages/vant-doc/src/component/Container.vue
new file mode 100644
index 000000000..e66657bad
--- /dev/null
+++ b/packages/vant-doc/src/component/Container.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="van-doc-container van-doc-row"
+    :class="{ 'van-doc-container--with-simulator': hasSimulator }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-container',
+
+  props: {
+    hasSimulator: Boolean
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-container {
+  box-sizing: border-box;
+  padding-left: @van-doc-nav-width;
+  overflow: hidden;
+
+  &--with-simulator {
+    padding-right: @van-doc-simulator-width + @van-doc-padding;
+
+    @media (max-width: 1300px) {
+      padding-right: @van-doc-simulator-small-width + @van-doc-padding;
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/Content.vue b/packages/vant-doc/src/component/Content.vue
new file mode 100644
index 000000000..44331fcfd
--- /dev/null
+++ b/packages/vant-doc/src/component/Content.vue
@@ -0,0 +1,218 @@
+<template>
+  <div :class="['van-doc-content', `van-doc-content--${currentPage}`]">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-content',
+
+  computed: {
+    currentPage() {
+      const { path } = this.$route;
+      if (path) {
+        return path.split('/').slice(-1)[0];
+      }
+      return this.$route.name;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-content {
+  position: relative;
+  flex: 1;
+  padding: 0 0 75px;
+
+  .card {
+    margin-bottom: 24px;
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 8px 12px #ebedf0;
+  }
+
+  a {
+    color: @van-doc-blue;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: @van-doc-black;
+    font-weight: normal;
+    line-height: 1.5;
+
+    &[id] {
+      cursor: pointer;
+    }
+  }
+
+  h1 {
+    margin: 0 0 30px;
+    font-size: 30px;
+    cursor: default;
+  }
+
+  h2 {
+    margin: 45px 0 20px;
+    font-size: 22px;
+  }
+
+  h3 {
+    margin-bottom: 12px;
+    font-weight: 500;
+    font-size: 17px;
+  }
+
+  h4 {
+    margin: 24px 0 12px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  h5 {
+    margin: 24px 0 12px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  p {
+    color: @van-doc-text-color;
+    font-size: 14px;
+    line-height: 26px;
+  }
+
+  table {
+    width: 100%;
+    margin-top: 12px;
+    color: @van-doc-text-color;
+    font-size: 13px;
+    line-height: 1.5;
+    border-radius: 6px;
+    border-collapse: collapse;
+
+    th {
+      padding: 8px 10px;
+      font-weight: 500;
+      text-align: left;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    td {
+      padding: 8px;
+      border-top: 1px solid @van-doc-code-background-color;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    code {
+      padding: 0 8px;
+      font-size: 13px;
+      font-family: inherit;
+      word-break: keep-all;
+    }
+  }
+
+  ul li,
+  ol li {
+    position: relative;
+    margin: 5px 0 5px 10px;
+    padding-left: 15px;
+    color: @van-doc-text-color;
+    font-size: 14px;
+    line-height: 22px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 6px;
+      height: 6px;
+      margin-top: 8px;
+      border: 1px solid @van-doc-dark-grey;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+  hr {
+    margin: 30px 0;
+    border: 0 none;
+    border-top: 1px solid #eee;
+  }
+
+  p > code,
+  li > code,
+  table code {
+    display: inline;
+    margin: 2px 3px;
+    padding: 2px 5px;
+    background-color: #f0f2f5;
+    box-shadow: none;
+  }
+
+  section {
+    padding: 30px;
+    overflow: hidden;
+  }
+
+  blockquote {
+    margin: 20px 0 0;
+    padding: 16px;
+    color: rgba(52, 73, 94, .8);
+    font-size: 14px;
+    background-color: #ecf9ff;
+    border-left: 5px solid #50bfff;
+    border-radius: 4px;
+  }
+
+  img {
+    width: 100%;
+    margin: 15px 0;
+    box-shadow: 0 2px 4px #ebedf0;
+  }
+
+  &--changelog {
+    strong {
+      display: block;
+      margin: 12px 0;
+      font-weight: 500;
+      font-size: 15px;
+    }
+
+    h3 {
+      font-size: 20px;
+
+      + p code {
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/DemoBlock.vue b/packages/vant-doc/src/component/DemoBlock.vue
new file mode 100644
index 000000000..ca41a5d17
--- /dev/null
+++ b/packages/vant-doc/src/component/DemoBlock.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="van-doc-demo-block">
+    <h2 class="van-doc-demo-block__title">{{ title }}</h2>
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-demo-block',
+
+  props: {
+    title: String
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-demo-block {
+  &__title {
+    margin: 0;
+    padding: 35px 15px 15px;
+    color: @van-doc-text-light-blue;
+    font-weight: normal;
+    font-size: 14px;
+  }
+
+  &:first-of-type {
+    .van-doc-demo-block__title {
+      padding-top: 20px;
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/DemoSection.vue b/packages/vant-doc/src/component/DemoSection.vue
new file mode 100644
index 000000000..9cc943020
--- /dev/null
+++ b/packages/vant-doc/src/component/DemoSection.vue
@@ -0,0 +1,62 @@
+<template>
+  <section class="van-doc-demo-section" :class="`demo-${demoName}`" :style="style">
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-demo-section',
+
+  props: {
+    name: String,
+    title: String,
+    background: String
+  },
+
+  computed: {
+    demoName() {
+      return this.name || this.getParentName();
+    },
+    style() {
+      return {
+        background: this.background
+      };
+    }
+  },
+
+  methods: {
+    getParentName() {
+      const { $parent } = this;
+      if ($parent && $parent.$options.name) {
+        return $parent.$options.name.replace('demo-', '');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-demo-section {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding-bottom: 20px;
+
+  &__title {
+    margin: 0;
+    padding: 15px;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 1.5;
+    text-transform: capitalize;
+
+    + .van-doc-demo-block {
+      .van-doc-demo-block__title {
+        padding-top: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/Header.vue b/packages/vant-doc/src/component/Header.vue
new file mode 100644
index 000000000..5a5073cd5
--- /dev/null
+++ b/packages/vant-doc/src/component/Header.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="van-doc-header">
+    <div class="van-doc-row">
+      <div class="van-doc-header__top">
+        <a class="van-doc-header__logo" :href="config.logo.href">
+          <img :src="config.logo.image">
+          <span>{{ config.logo.title }}</span>
+        </a>
+
+        <search-input v-if="searchConfig" :lang="lang" :search-config="searchConfig" />
+
+        <ul class="van-doc-header__top-nav">
+          <li v-for="item in config.nav.logoLink" class="van-doc-header__top-nav-item">
+            <a class="van-doc-header__logo-link" target="_blank" :href="item.url">
+              <img :src="item.image">
+            </a>
+          </li>
+
+          <li ref="version" v-if="versions" class="van-doc-header__top-nav-item">
+            <span class="van-doc-header__cube van-doc-header__version" @click="toggleVersionPop">
+              {{ versions[0] }}
+              <transition name="van-doc-dropdown">
+                <div v-if="showVersionPop" class="van-doc-header__version-pop">
+                  <div
+                    v-for="item in versions"
+                    class="van-doc-header__version-pop-item"
+                    @click="onSwitchVersion(item)"
+                  >{{ item }}</div>
+                </div>
+              </transition>
+            </span>
+          </li>
+
+          <li v-if="config.nav.lang" class="van-doc-header__top-nav-item">
+            <a class="van-doc-header__cube" :href="langLink">{{ config.nav.lang.text }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchInput from './SearchInput';
+
+export default {
+  name: 'van-doc-header',
+
+  components: {
+    SearchInput
+  },
+
+  props: {
+    lang: String,
+    config: Object,
+    github: String,
+    versions: Array,
+    searchConfig: Object
+  },
+
+  data() {
+    return {
+      showVersionPop: false
+    };
+  },
+
+  computed: {
+    langLink() {
+      const { lang } = this.config.nav;
+      return `#${this.$route.path.replace(lang.from, lang.to)}`;
+    }
+  },
+
+  methods: {
+    toggleVersionPop() {
+      const val = !this.showVersionPop;
+
+      const action = val ? 'add' : 'remove';
+      document.body[`${action}EventListener`]('click', this.checkHideVersionPop);
+
+      this.showVersionPop = val;
+    },
+
+    checkHideVersionPop(event) {
+      if (!this.$refs.version.contains(event.target)) {
+        this.showVersionPop = false;
+      }
+    },
+
+    onSwitchLang(lang) {
+      this.$router.push(this.$route.path.replace(lang.from, lang.to));
+    },
+
+    onSwitchVersion(version) {
+      this.$emit('switch-version', version);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-header {
+  width: 100%;
+  box-shadow: 0 4px 12px #ebedf0;
+  user-select: none;
+
+  &__top {
+    display: flex;
+    align-items: center;
+    height: @van-doc-header-top-height;
+    padding: 0 @van-doc-padding;
+    line-height: @van-doc-header-top-height;
+    background-color: #001938;
+
+    &-nav {
+      flex: 1;
+      font-size: 0;
+      text-align: right;
+
+      > li {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      &-item {
+        margin-left: 20px;
+      }
+
+      &-title {
+        display: block;
+        font-size: 15px;
+      }
+    }
+  }
+
+  &__cube {
+    position: relative;
+    display: block;
+    padding: 0 10px;
+    color: #fff;
+    font-size: 14px;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    line-height: 24px;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 20px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+  }
+
+  &__version {
+    padding-right: 20px;
+
+    &::after {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      width: 5px;
+      height: 5px;
+      color: rgba(255, 255, 255, 0.9);
+      border: 1px solid;
+      border-color: transparent transparent currentColor currentColor;
+      transform: rotate(-45deg);
+      content: '';
+    }
+
+    &-pop {
+      position: absolute;
+      top: 30px;
+      right: 0;
+      left: 0;
+      z-index: 99;
+      color: #333;
+      line-height: 36px;
+      text-align: left;
+      background-color: #fff;
+      border-radius: 3px;
+      box-shadow: 0 4px 12px #ebedf0;
+      transform-origin: top;
+      transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+      &-item {
+        padding-left: 7px;
+        transition: 0.2s;
+
+        &:hover {
+          color: @van-doc-blue;
+        }
+      }
+    }
+  }
+
+  &__logo {
+    display: block;
+
+    img,
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img {
+      width: 26px;
+      margin-right: 10px;
+    }
+
+    span {
+      color: #fff;
+      font-size: 22px;
+    }
+  }
+
+  &__logo-link {
+    img {
+      display: block;
+      width: 26px;
+      height: 26px;
+      transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+}
+
+.van-doc-dropdown {
+  &-enter,
+  &-leave-active {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/Nav.vue b/packages/vant-doc/src/component/Nav.vue
new file mode 100644
index 000000000..9b2d70283
--- /dev/null
+++ b/packages/vant-doc/src/component/Nav.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="van-doc-nav" :style="style">
+    <div v-for="(item, index) in navConfig" class="van-doc-nav__item" :key="index">
+      <van-doc-nav-link :item="item" :base="base" />
+      <div v-if="item.children">
+        <div
+          class="nav-item van-doc-nav__group-title van-doc-nav__group-title"
+          v-for="(navItem, navIndex) in item.children"
+          :key="navIndex"
+        >
+          <van-doc-nav-link :item="navItem" :base="base" />
+        </div>
+      </div>
+      <template v-if="item.groups">
+        <div v-for="(group, groupIndex) in item.groups" :key="groupIndex">
+          <div class="van-doc-nav__group-title">{{ group.groupName }}</div>
+          <div>
+            <template v-for="(navItem, navItemIndex) in group.list">
+              <div v-if="!navItem.disabled" :key="navItemIndex" class="van-doc-nav__subitem">
+                <van-doc-nav-link :item="navItem" :base="base" />
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavLink from './NavLink.vue';
+
+export default {
+  name: 'van-doc-nav',
+
+  components: {
+    [NavLink.name]: NavLink
+  },
+
+  props: {
+    navConfig: Array,
+    base: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      top: 60,
+      bottom: 0
+    };
+  },
+
+  computed: {
+    style() {
+      return {
+        top: this.top + 'px',
+        bottom: this.bottom + 'px'
+      };
+    }
+  },
+
+  created() {
+    window.addEventListener('scroll', this.onScroll);
+    this.onScroll();
+  },
+
+  methods: {
+    onScroll() {
+      const { pageYOffset: offset } = window;
+      this.top = Math.max(0, 60 - offset);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-nav {
+  position: fixed;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  min-width: @van-doc-nav-width;
+  max-width: @van-doc-nav-width;
+  padding: 25px 0 75px;
+  overflow-y: scroll;
+  background-color: #fff;
+  border-right: 1px solid @van-doc-border-color;
+  box-shadow: 0 8px 12px #ebedf0;
+
+  @media (min-width: @van-doc-row-max-width) {
+    left: 50%;
+    margin-left: -(@van-doc-row-max-width / 2);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 6px;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(69, 90, 100, 0.2);
+  }
+
+  &__item,
+  &__subitem {
+    a {
+      display: block;
+      margin: 0;
+      padding: 10px 10px 10px @van-doc-padding;
+      color: #455a64;
+      font-size: 16px;
+      line-height: 24px;
+      transition: all 0.3s;
+
+      &.active {
+        color: @van-doc-blue;
+      }
+    }
+  }
+
+  &__item {
+    > a {
+      font-weight: bold;
+    }
+  }
+
+  &__subitem {
+    a {
+      font-size: 14px;
+
+      &:hover {
+        color: @van-doc-blue;
+      }
+    }
+
+    span {
+      font-size: 13px;
+    }
+  }
+
+  &__group-title {
+    padding-left: @van-doc-padding;
+    color: @van-doc-text-light-blue;
+    font-size: 12px;
+    line-height: 40px;
+  }
+
+  @media (max-width: 1300px) {
+    min-width: 220px;
+    max-width: 220px;
+
+    &__item,
+    &__subitem {
+      a {
+        line-height: 22px;
+      }
+    }
+
+    &__subitem {
+      a {
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/NavLink.vue b/packages/vant-doc/src/component/NavLink.vue
new file mode 100644
index 000000000..f39355010
--- /dev/null
+++ b/packages/vant-doc/src/component/NavLink.vue
@@ -0,0 +1,23 @@
+<template>
+  <router-link v-if="item.path" active-class="active" :to="base + item.path" v-html="itemName" />
+  <a v-else-if="item.link" :href="item.link" v-html="itemName" />
+  <a v-else v-html="itemName " />
+</template>
+
+<script>
+export default {
+  name: 'van-doc-nav-link',
+
+  props: {
+    base: String,
+    item: Object
+  },
+
+  computed: {
+    itemName() {
+      const name = (this.item.title || this.item.name).split(' ');
+      return `${name[0]} <span>${name.slice(1).join(' ')}</span>`;
+    }
+  }
+};
+</script>
diff --git a/packages/vant-doc/src/component/SearchInput.vue b/packages/vant-doc/src/component/SearchInput.vue
new file mode 100644
index 000000000..64d1d7278
--- /dev/null
+++ b/packages/vant-doc/src/component/SearchInput.vue
@@ -0,0 +1,101 @@
+<template>
+  <input class="van-doc-search" :placeholder="searchPlaceholder">
+</template>
+
+<script>
+export default {
+  name: 'van-doc-search',
+
+  props: {
+    lang: String,
+    searchConfig: Object
+  },
+
+  computed: {
+    searchPlaceholder() {
+      return this.lang === 'zh-CN' ? '搜索文档...' : 'Search...';
+    }
+  },
+
+  watch: {
+    lang(lang) {
+      if (this.docsearchInstance) {
+        this.docsearchInstance.algoliaOptions.facetFilters = [`lang:${lang}`];
+      }
+    }
+  },
+
+  mounted() {
+    if (this.searchConfig) {
+      this.docsearchInstance = window.docsearch({
+        ...this.searchConfig,
+        inputSelector: '.van-doc-search',
+        algoliaOptions: {
+          facetFilters: [`lang:${this.lang}`]
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-search {
+  width: 200px;
+  height: 60px;
+  margin-left: 140px;
+  color: #fff;
+  font-size: 14px;
+  background-color: transparent;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #fff;
+    opacity: 0.7;
+  }
+}
+
+.ds-dropdown-menu {
+  line-height: 1.8;
+}
+
+.algolia-autocomplete {
+  .algolia-docsearch-suggestion--highlight {
+    color: @van-doc-blue;
+    background-color: transparent;
+  }
+
+  .algolia-docsearch-suggestion--title {
+    font-weight: 500;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    .algolia-docsearch-suggestion--highlight {
+      box-shadow: inset 0 -1px 0 0 @van-doc-blue;
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    border-bottom-color: #eee;
+  }
+
+  .ds-dropdown-menu [class^='ds-dataset-'] {
+    border: none;
+  }
+
+  .ds-dropdown-menu {
+    top: 80% !important;
+    box-shadow: 0 4px 12px #ebedf0;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/component/Simulator.vue b/packages/vant-doc/src/component/Simulator.vue
new file mode 100644
index 000000000..00e6d318e
--- /dev/null
+++ b/packages/vant-doc/src/component/Simulator.vue
@@ -0,0 +1,87 @@
+<template>
+  <div :class="['van-doc-simulator', { 'van-doc-simulator-fixed': isFixed }]">
+    <iframe ref="iframe" :src="src" :style="simulatorStyle" frameborder="0" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-simulator',
+
+  props: {
+    src: String
+  },
+
+  data() {
+    return {
+      scrollTop: window.scrollY,
+      windowHeight: window.innerHeight
+    };
+  },
+
+  computed: {
+    isFixed() {
+      return this.scrollTop > 60;
+    },
+
+    simulatorStyle() {
+      const height = Math.min(640, this.windowHeight - 90);
+      return {
+        height: height + 'px'
+      };
+    }
+  },
+
+  mounted() {
+    window.addEventListener('scroll', () => {
+      this.scrollTop = window.scrollY;
+    });
+    window.addEventListener('resize', () => {
+      this.windowHeight = window.innerHeight;
+    });
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-simulator {
+  position: absolute;
+  top: @van-doc-padding + @van-doc-header-top-height;
+  right: @van-doc-padding;
+  z-index: 1;
+  box-sizing: border-box;
+  width: @van-doc-simulator-width;
+  min-width: @van-doc-simulator-width;
+  overflow: hidden;
+  background: #fafafa;
+  border-radius: 6px;
+  box-shadow: #ebedf0 0 4px 12px;
+
+  @media (max-width: 1300px) {
+    width: @van-doc-simulator-small-width;
+    min-width: @van-doc-simulator-small-width;
+  }
+
+  @media (max-width: 1100px) {
+    right: auto;
+    left: 750px;
+  }
+
+  @media (min-width: @van-doc-row-max-width) {
+    right: 50%;
+    margin-right: calc(-@van-doc-row-max-width / 2 + 40px);
+  }
+
+  &-fixed {
+    position: fixed;
+    top: @van-doc-padding;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+  }
+}
+</style>
diff --git a/packages/vant-doc/src/index.js b/packages/vant-doc/src/index.js
new file mode 100644
index 000000000..8272f8e56
--- /dev/null
+++ b/packages/vant-doc/src/index.js
@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import VanDoc from './VanDoc';
+import Nav from './component/Nav';
+import Block from './component/Block';
+import Header from './component/Header';
+import Content from './component/Content';
+import Container from './component/Container';
+import Simulator from './component/Simulator';
+import DemoBlock from './component/DemoBlock';
+import DemoSection from './component/DemoSection';
+
+const components = [
+  Nav,
+  Header,
+  VanDoc,
+  Block,
+  Content,
+  Container,
+  Simulator,
+  DemoBlock,
+  DemoSection
+];
+
+export default function install() {
+  components.forEach(Component => {
+    Vue.component(Component.name, Component);
+  });
+}
+
+export {
+  Nav,
+  Header,
+  VanDoc,
+  Block,
+  Content,
+  Container,
+  Simulator,
+  DemoBlock,
+  DemoSection
+};
diff --git a/packages/vant-doc/src/style/base.less b/packages/vant-doc/src/style/base.less
new file mode 100644
index 000000000..6563dcc10
--- /dev/null
+++ b/packages/vant-doc/src/style/base.less
@@ -0,0 +1,46 @@
+@import './variable';
+
+body {
+  min-width: 1100px;
+  margin: 0;
+  overflow-x: auto;
+  color: #333;
+  font-size: 16px;
+  font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #f0f3f6;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-size: inherit;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.van-doc-row {
+  width: 100%;
+
+  @media (min-width: @van-doc-row-max-width) {
+    width: @van-doc-row-max-width;
+    margin: 0 auto;
+  }
+}
diff --git a/packages/vant-doc/src/style/highlight.less b/packages/vant-doc/src/style/highlight.less
new file mode 100644
index 000000000..0230efeca
--- /dev/null
+++ b/packages/vant-doc/src/style/highlight.less
@@ -0,0 +1,80 @@
+@import './variable';
+
+code {
+  position: relative;
+  display: block;
+  margin-top: 20px;
+  overflow-x: auto;
+  color: @van-doc-code-color;
+  font-weight: 400;
+  font-size: 13px;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+  line-height: 24px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+pre {
+  margin: 0;
+}
+
+.hljs {
+  display: block;
+  padding: 0.5em;
+  overflow-x: auto;
+  background: #fff;
+}
+
+.hljs-subst {
+  color: @van-doc-code-color;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-symbol,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #5758bb;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #999;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-bullet,
+.hljs-link {
+  color: #07c160;
+}
+
+.hljs-deletion,
+.hljs-variable {
+  color: #88f;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-doctag,
+.hljs-type,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-strong {
+  color: #1889f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-attribute {
+  color: #e6550d;
+}
diff --git a/packages/vant-doc/src/style/index.less b/packages/vant-doc/src/style/index.less
new file mode 100644
index 000000000..e562b9a4c
--- /dev/null
+++ b/packages/vant-doc/src/style/index.less
@@ -0,0 +1,3 @@
+@import './variable';
+@import './base';
+@import './highlight';
diff --git a/packages/vant-doc/src/style/variable.less b/packages/vant-doc/src/style/variable.less
new file mode 100644
index 000000000..cdfb20b84
--- /dev/null
+++ b/packages/vant-doc/src/style/variable.less
@@ -0,0 +1,23 @@
+@van-doc-black: #333;
+@van-doc-blue: #1989fa;
+@van-doc-text-color: #34495e;
+@van-doc-text-light-blue: rgba(69, 90, 100, .6);
+@van-doc-grey: #999;
+@van-doc-dark-grey: #666;
+@van-doc-light-grey: #ccc;
+@van-doc-border-color: #f1f4f8;
+@van-doc-code-color: #455a64;
+@van-doc-code-background-color: #f1f4f8;
+@van-doc-padding: 30px;
+@van-doc-row-max-width: 1680px;
+@van-doc-nav-width: 220px;
+
+// header
+@van-doc-header-top-height: 60px;
+@van-doc-header-bottom-height: 50px;
+
+// simulator
+@van-doc-simulator-width: 360px;
+@van-doc-simulator-small-width: 320px;
+@van-doc-simulator-height: 620px;
+@van-doc-simulator-small-height: 560px;
diff --git a/yarn.lock b/yarn.lock
index 879560862..a15ea40fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1194,16 +1194,10 @@
     shelljs "^0.8.2"
     signale "^1.4.0"
 
-"@vant/doc@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.4.0.tgz#d0d2d03e7ed831795ebdf9d840208614d4051057"
-  integrity sha512-lahIcEFfdvVQuicQpgKoPIw5PxV868XAsl8N3tLFBJ0DvOoI7nJB1fYICbpWeC5DShTq2Y/UMhd/DYco+Qimjg==
-  dependencies:
-    cheerio "0.22.0"
-    commander "^2.17.1"
-    decamelize "^1.2.0"
-    fs-extra "^4.0.2"
-    shelljs "^0.8.2"
+"@vant/doc@^2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.5.1.tgz#7c17e2dd20533f6359b526c20c75eb27a031cfb7"
+  integrity sha512-Ff5ach0ZR0tCcfGq0pnjsa2OPhg1zZ3zGE5OKMU3uFrld9sRXFqiB1TL4WpqtGmIA7UqmBVS+4MNt0Lo62knMg==
 
 "@vant/eslint-config@^1.2.5":
   version "1.2.5"
@@ -2393,28 +2387,6 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-cheerio@0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
-  integrity sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=
-  dependencies:
-    css-select "~1.2.0"
-    dom-serializer "~0.1.0"
-    entities "~1.1.1"
-    htmlparser2 "^3.9.1"
-    lodash.assignin "^4.0.9"
-    lodash.bind "^4.1.4"
-    lodash.defaults "^4.0.1"
-    lodash.filter "^4.4.0"
-    lodash.flatten "^4.2.0"
-    lodash.foreach "^4.3.0"
-    lodash.map "^4.4.0"
-    lodash.merge "^4.4.0"
-    lodash.pick "^4.2.1"
-    lodash.reduce "^4.4.0"
-    lodash.reject "^4.4.0"
-    lodash.some "^4.4.0"
-
 chokidar@^2.0.2:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.5.tgz#0ae8434d962281a5f56c72869e79cb6d9d86ad4d"
@@ -2914,7 +2886,7 @@ css-loader@^3.1.0:
     postcss-value-parser "^4.0.0"
     schema-utils "^2.0.0"
 
-css-select@^1.1.0, css-select@~1.2.0:
+css-select@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
   integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
@@ -3348,7 +3320,7 @@ dom-event-types@^1.0.0:
   resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
   integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
 
-dom-serializer@0, dom-serializer@~0.1.0:
+dom-serializer@0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
   integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
@@ -4302,15 +4274,6 @@ front-matter@^3.0.2:
   dependencies:
     js-yaml "^3.13.1"
 
-fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -4785,7 +4748,7 @@ html-webpack-plugin@3.2.0:
     toposort "^1.0.0"
     util.promisify "1.0.0"
 
-htmlparser2@^3.10.0, htmlparser2@^3.3.0, htmlparser2@^3.9.1:
+htmlparser2@^3.10.0, htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
   integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
@@ -6227,71 +6190,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash.assignin@^4.0.9:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
-  integrity sha1-uo31+4QesKPoBEIysOJjqNxqKKI=
-
-lodash.bind@^4.1.4:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
-  integrity sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=
-
-lodash.defaults@^4.0.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
-  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
-
-lodash.filter@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
-  integrity sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4=
-
-lodash.flatten@^4.2.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
-  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
-
-lodash.foreach@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
-  integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=
-
 lodash.kebabcase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
-lodash.map@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
-  integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
-
-lodash.merge@^4.4.0:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
-  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-
-lodash.pick@^4.2.1:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
-  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
-
-lodash.reduce@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
-  integrity sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs=
-
-lodash.reject@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415"
-  integrity sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU=
-
-lodash.some@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
-  integrity sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"