diff --git a/package.json b/package.json
index 5dfb64057152..178883519d39 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,11 @@
     "url": "https://github.com/vuejs/vitepress/issues"
   },
   "dependencies": {
+    "@docsearch/css": "^1.0.0-alpha.28",
+    "@docsearch/js": "^1.0.0-alpha.28",
     "@vue/compiler-sfc": "^3.0.3",
     "@vue/server-renderer": "^3.0.3",
+    "algoliasearch": "^4.8.1",
     "chalk": "^4.1.0",
     "debug": "^4.1.1",
     "diacritics": "^1.3.0",
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 6b3f944355bc..9a009ec972f8 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -3,7 +3,9 @@
     <header class="navbar" v-if="showNavbar">
       <NavBar>
         <template #search>
-          <slot name="navbar-search" />
+          <slot name="navbar-search">
+            <AlgoliaSearchBox :options="$site.themeConfig.algolia" />
+          </slot>
         </template>
       </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
@@ -53,6 +55,7 @@ import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
 import { useRoute, useSiteData, useSiteDataByRoute } from 'vitepress'
+import AlgoliaSearchBox from './components/AlgoliaSearchBox.vue'
 
 const route = useRoute()
 const siteData = useSiteData()
@@ -107,3 +110,10 @@ watch(route, hideSidebar)
 // TODO: route only changes when the pathname changes
 // listening to hashchange does nothing because it's prevented in router
 </script>
+
+<style>
+/* remove margin added by user agent */
+.DocSearch-SearchBar form {
+  margin-block-end: 0;
+}
+</style>
diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
new file mode 100644
index 000000000000..298e2706313e
--- /dev/null
+++ b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -0,0 +1,158 @@
+<template>
+  <div id="docsearch"></div>
+</template>
+
+<script lang="ts">
+import { AlgoliaSearchOptions } from 'algoliasearch'
+// import docsearch from '@docsearch/js'
+// import '@docsearch/css'
+import { useRoute, useRouter } from 'vitepress'
+import { getCurrentInstance, onMounted, PropType, watch } from 'vue'
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1 ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  // const url = pathname.replace(this.$site.base, '/') + hash
+  const url = pathname + hash
+
+  return url
+}
+
+export default {
+  name: 'AlgoliaSearchBox',
+
+  props: {
+    options: {
+      type: Object as PropType<AlgoliaSearchOptions>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const route = useRoute()
+    const router = useRouter()
+    const vm = getCurrentInstance()
+
+    watch(
+      () => props.options,
+      newValue => {
+        update(newValue)
+      }
+    )
+
+    function update(options: any) {
+      if (vm && vm.vnode.el) {
+        vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
+        initialize(options)
+      }
+    }
+
+    function initialize(userOptions: any) {
+      Promise.all([
+        import('@docsearch/js'),
+        import('@docsearch/css'),
+        // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
+        // Promise.resolve(docsearch),
+        // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
+      ]).then(([docsearch]) => {
+        docsearch = docsearch.default
+
+        docsearch(
+          Object.assign({}, userOptions, {
+            container: '#docsearch',
+            // #697 Make DocSearch work well in i18n mode.
+            searchParameters: Object.assign(
+              {},
+              // lang && {
+              //   facetFilters: [`lang:${lang}`].concat(
+              //     userOptions.facetFilters || []
+              //   )
+              // },
+              userOptions.searchParameters
+            ),
+            navigator: {
+              navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
+                const { pathname: hitPathname } = new URL(
+                  window.location.origin + suggestionUrl
+                )
+
+                // Vue Router doesn't handle same-page navigation so we use
+                // the native browser location API for anchor navigation.
+                if (route.path === hitPathname) {
+                  window.location.assign(window.location.origin + suggestionUrl)
+                } else {
+                  router.go(suggestionUrl)
+                }
+              },
+            },
+            transformItems: items => {
+              return items.map(item => {
+                return Object.assign({}, item, {
+                  url: getRelativePath(item.url),
+                })
+              })
+            },
+            hitComponent: ({ hit, children }) => {
+              const relativeHit = hit.url.startsWith('http')
+                ? getRelativePath(hit.url as string)
+                : hit.url
+
+              return {
+                type: 'a',
+                ref: undefined,
+                constructor: undefined,
+                key: undefined,
+                props: {
+                  href: hit.url,
+                  onClick: (event: MouseEvent) => {
+                    if (isSpecialClick(event)) {
+                      return
+                    }
+
+                    // We rely on the native link scrolling when user is
+                    // already on the right anchor because Vue Router doesn't
+                    // support duplicated history entries.
+                    if (route.path === relativeHit) {
+                      return
+                    }
+
+                    // If the hits goes to another page, we prevent the native link behavior
+                    // to leverage the Vue Router loading feature.
+                    if (route.path !== relativeHit) {
+                      event.preventDefault()
+                    }
+
+                    router.go(relativeHit)
+                  },
+                  children,
+                },
+              }
+            },
+          })
+        )
+      })
+    }
+
+    onMounted(() => {
+      initialize(props.options)
+    })
+  },
+}
+</script>
+
+<style>
+.DocSearch {
+  --docsearch-primary-color: #42b983;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+}
+</style>
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 4ae1025104a8..2a84f485a5e9 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -28,8 +28,8 @@
    * Z Indexes
    * --------------------------------------------------------------------- */
 
-  --z-index-navbar: 1100;
-  --z-index-sidebar: 1000;
+  --z-index-navbar: 10;
+  --z-index-sidebar: 6;
 
   /**
    * Sizes
diff --git a/yarn.lock b/yarn.lock
index 6095946aada7..7d2d9e6a4fb8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,110 @@
 # yarn lockfile v1
 
 
+"@algolia/cache-browser-local-storage@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.8.1.tgz#1c0230f6f174a37bb22549ec502cad2dc6973c35"
+  integrity sha512-qqudBJE2BzpiO11CbWDbxLual75qiP6lEjHW1zlG2P6jO/NkCnVMsOhPgu2eiJx7lTJ3vhkn981g87qZre8KSg==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+
+"@algolia/cache-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.8.1.tgz#19c76300d0e75550c4dd88fa1d12b06a75cc290f"
+  integrity sha512-5bJ3KX0trQfNXFzEgDx7IHUcLdrjIvs/6g5fxGMRr0eWJj6x1tSmbIJBff4pdQw7oWZvO1kueWrWD1v0dV9b/Q==
+
+"@algolia/cache-in-memory@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.8.1.tgz#c84a72e75cf614dc75c2ccf0a993c382d3153862"
+  integrity sha512-4EEUi+DHsMKfZ38AYovXVS09oLTLSQlssw1PTswJEx7wuKCAzctWSBfB116+b1eAw8mp6EmiTJw8D2qFhr70oQ==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+
+"@algolia/client-account@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.8.1.tgz#7c75a5151860a592abfe720610babd0652b5d822"
+  integrity sha512-zfQSb9EYzZrOsUqsekKJYuizpQVLiq1D0B81KC8V0PjhjtQc13UrAJx68XP3fkNBe7V9K6H3dIRPOaK5XVHYOg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-analytics@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.8.1.tgz#330c2e001f758fe750820366092ea6f407d6ca9f"
+  integrity sha512-QF6I7MCV9jI8dawi8W/tA/R5EyE+4uKc74tqLTrm6WoUdlwExaTuKgSjsqZtSjRileIDw5TuuJhSGCpgBktDOg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.8.1.tgz#a0527d8ac76b41605f3fd6370d9cf1390ea98e10"
+  integrity sha512-iAVBzNUFyUYqX6yyWN3AsxB+sF2g+lWguXmdMaSDAym4XMRAT6cvd3xUKBloHafzm2zWR69XHm/qxUuqJbFnxQ==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-recommendation@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-recommendation/-/client-recommendation-4.8.1.tgz#ce0577f53eaa0877a40e4f14789714a32d199a50"
+  integrity sha512-WiI86PtQKjU+pmIqlzyJ5skOqfZy6PTc7s6XPgPmVd+XfQxRweXxiejbBG0aQlVcZbN2eetNMmI2vawf1cTDWg==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/client-search@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.8.1.tgz#62326038d9d128f8bc87857c514ce7dea91f73b1"
+  integrity sha512-EAeTq5iqpoEPQmi25La1zM5hxvE04hnZzutlUq+5flhrmjwV75z6xNjqNBlDVhPwH545Xg2jcccXQjjNzLHj7A==
+  dependencies:
+    "@algolia/client-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
+"@algolia/logger-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.8.1.tgz#46accd128bc5179385c437085a02e0d9c5e721ae"
+  integrity sha512-ENX/9LuroGxLCjPbvuO6yKPoFNkSXFO0LhWHeR/JQY0gdTHhHgj2A2nXT4Qt0PxFGE9XNhXlJ3YYVxtWEG8rww==
+
+"@algolia/logger-console@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.8.1.tgz#a0b42f0cab7a33e5cd09ff8a0e6da1d197c2a7aa"
+  integrity sha512-pFxNb9aOvUsyS+RxHJgMvnTCzt6ewqi0nsICDCCXQ/Lz1VrRFbrfmXcfxD46nQ0W8o8/7esXzaVdjGUKmEmq0Q==
+  dependencies:
+    "@algolia/logger-common" "4.8.1"
+
+"@algolia/requester-browser-xhr@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.8.1.tgz#02ceb6548957d347c73a6eb8c8292750136bb88a"
+  integrity sha512-N0+0UONv1FYMTaZR/a6wl43MUrGFYpAvsqlVgCN8/CFhuG4LFBUXhZQudL8wq9GfMoUENJ6P9spCUk2EcE5mKQ==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+
+"@algolia/requester-common@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.8.1.tgz#8d0990aed68d785433e40cd389c8a87701543f43"
+  integrity sha512-ZtG4g4pxPbN2qI8E7ChOthuntZGIauQegzXyqYfRAAlIZ+lkTTc8KPmUDREFhkT9znCKoPD43w0j8YogSVo/4A==
+
+"@algolia/requester-node-http@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.8.1.tgz#23702832093e769a7837107bf96200fba9d77be3"
+  integrity sha512-OyryP9UBcIqD9B9C6TfkjeNbd8G/MCxuaBaK3QfbjP/J7EUVeMBFPs0jo52jTKlm8l4cgRIHCDxa1ctgfhE1Xg==
+  dependencies:
+    "@algolia/requester-common" "4.8.1"
+
+"@algolia/transporter@4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.8.1.tgz#a80d41ae4f4b0e9f2606f4c20cef9aa4183cb59b"
+  integrity sha512-JNO0Bs9vmQmrM54daORAFdmA05QFV7IQNoLS7ucbtEKexJAwmxb/mOB+sAH6Ju3V8vGPPvvn9jcgu9fwIkyX3Q==
+  dependencies:
+    "@algolia/cache-common" "4.8.1"
+    "@algolia/logger-common" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -279,6 +383,39 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@docsearch/css@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.28.tgz#c8a2cd8c1bb3a6855c51892e9dbdab5d42fe6e23"
+  integrity sha512-1AhRzVdAkrWwhaxTX6/R7SnFHz8yLz1W8I/AldlTrfbNvZs9INk1FZiEFTJdgHaP68nhgQNWSGlQiDiI3y2RYg==
+
+"@docsearch/js@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/js/-/js-1.0.0-alpha.28.tgz#f0fde7b8a6b1e1d8a7ae1e7655c43d959b457b2b"
+  integrity sha512-2g7aPhBy7FoEyeZW2G3LYHWVa8CFvqyozEz8PXt3hyywdFcmEIqmoCRwn8kboVftrOKCjtPcuLCewsaBoB3uiw==
+  dependencies:
+    "@docsearch/react" "^1.0.0-alpha.28"
+    preact "^10.0.0"
+
+"@docsearch/react@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.28.tgz#4f039ed79f8b3332b19a57677b219aebc5010e9d"
+  integrity sha512-XjJOnCBXn+UZmtuDmgzlVIHnnvh6yHVwG4aFq8AXN6xJEIX3f180FvGaowFWAxgdtHplJxFGux0Xx4piHqBzIw==
+  dependencies:
+    "@docsearch/css" "^1.0.0-alpha.28"
+    "@francoischalifour/autocomplete-core" "^1.0.0-alpha.28"
+    "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
+    algoliasearch "^4.0.0"
+
+"@francoischalifour/autocomplete-core@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz#6b9d8491288e77f831e9b345d461623b0d3f5005"
+  integrity sha512-rL9x+72btViw+9icfBKUJjZj87FgjFrD2esuTUqtj4RAX3s4AuVZiN8XEsfjQBSc6qJk31cxlvqZHC/BIyYXgg==
+
+"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
+  integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1018,6 +1155,26 @@ ajv@^6.12.3:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+algoliasearch@^4.0.0, algoliasearch@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.8.1.tgz#ccaa1674459f2266cdc565a041bc59bd41218638"
+  integrity sha512-rK0VQiOC/9DFD6cwAZIl1dq8SrmtSLVmrz9rk2IQ0/jpTKVAE7xstOaml3nvxjBZWcFQsS4+P2qtzsg6NaLaWw==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.8.1"
+    "@algolia/cache-common" "4.8.1"
+    "@algolia/cache-in-memory" "4.8.1"
+    "@algolia/client-account" "4.8.1"
+    "@algolia/client-analytics" "4.8.1"
+    "@algolia/client-common" "4.8.1"
+    "@algolia/client-recommendation" "4.8.1"
+    "@algolia/client-search" "4.8.1"
+    "@algolia/logger-common" "4.8.1"
+    "@algolia/logger-console" "4.8.1"
+    "@algolia/requester-browser-xhr" "4.8.1"
+    "@algolia/requester-common" "4.8.1"
+    "@algolia/requester-node-http" "4.8.1"
+    "@algolia/transporter" "4.8.1"
+
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -5097,6 +5254,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+preact@^10.0.0:
+  version "10.5.7"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.7.tgz#f1d84725539e18f7ccbea937cf3db5895661dbd3"
+  integrity sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"