diff --git a/package-lock.json b/package-lock.json
index c2cbe01ac..e3d4c52a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@docsearch/react": "^3.5.2",
         "@headlessui/react": "^1.2.0",
         "@mdx-js/loader": "^2.3.0",
         "@rescript/react": "^0.12.0-alpha.3",
@@ -66,6 +67,162 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@algolia/autocomplete-core": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/cache-browser-local-storage": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.20.0.tgz",
+      "integrity": "sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==",
+      "dependencies": {
+        "@algolia/cache-common": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/cache-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.20.0.tgz",
+      "integrity": "sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ=="
+    },
+    "node_modules/@algolia/cache-in-memory": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.20.0.tgz",
+      "integrity": "sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==",
+      "dependencies": {
+        "@algolia/cache-common": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/client-account": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.20.0.tgz",
+      "integrity": "sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==",
+      "dependencies": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.20.0.tgz",
+      "integrity": "sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==",
+      "dependencies": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.20.0.tgz",
+      "integrity": "sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==",
+      "dependencies": {
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.20.0.tgz",
+      "integrity": "sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==",
+      "dependencies": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.20.0.tgz",
+      "integrity": "sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==",
+      "dependencies": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/logger-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.20.0.tgz",
+      "integrity": "sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ=="
+    },
+    "node_modules/@algolia/logger-console": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.20.0.tgz",
+      "integrity": "sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==",
+      "dependencies": {
+        "@algolia/logger-common": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.20.0.tgz",
+      "integrity": "sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/requester-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.20.0.tgz",
+      "integrity": "sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng=="
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.20.0.tgz",
+      "integrity": "sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==",
+      "dependencies": {
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
+    "node_modules/@algolia/transporter": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.20.0.tgz",
+      "integrity": "sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==",
+      "dependencies": {
+        "@algolia/cache-common": "4.20.0",
+        "@algolia/logger-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -89,6 +246,42 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@docsearch/css": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
+      "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA=="
+    },
+    "node_modules/@docsearch/react": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz",
+      "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.5.2",
+        "algoliasearch": "^4.19.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0",
+        "search-insights": ">= 1 < 3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "search-insights": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz",
@@ -1491,9 +1684,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz",
-      "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==",
+      "version": "18.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+      "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1501,9 +1694,9 @@
       }
     },
     "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@types/unist": {
       "version": "2.0.7",
@@ -1875,6 +2068,27 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/algoliasearch": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.20.0.tgz",
+      "integrity": "sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.20.0",
+        "@algolia/cache-common": "4.20.0",
+        "@algolia/cache-in-memory": "4.20.0",
+        "@algolia/client-account": "4.20.0",
+        "@algolia/client-analytics": "4.20.0",
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-personalization": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/logger-common": "4.20.0",
+        "@algolia/logger-console": "4.20.0",
+        "@algolia/requester-browser-xhr": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/requester-node-http": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2030,6 +2244,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.reduce": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.6.tgz",
+      "integrity": "sha512-UW+Mz8LG/sPSU8jRDCjVr6J/ZKAGpHfwrZ6kWTG5qCxIEiXdVshqGnu5vEZA8S1y6X4aCSbQZ0/EEsfvEvBiSg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.tosorted": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
@@ -2631,6 +2863,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/content-type": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
@@ -2844,9 +3095,9 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -3239,6 +3490,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
+    },
     "node_modules/es-module-lexer": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
@@ -9337,6 +9593,7 @@
       "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
       "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "dependencies": {
+        "array.prototype.reduce": "^1.0.4",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
         "es-abstract": "^1.20.4"
@@ -11879,6 +12136,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/search-insights": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.9.0.tgz",
+      "integrity": "sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==",
+      "peer": true
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -12217,6 +12480,18 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
@@ -12847,10 +13122,7 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "peer": true,
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=8"
       }
     },
     "node_modules/type-is": {
@@ -13642,6 +13914,152 @@
       "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
       "peer": true
     },
+    "@algolia/autocomplete-core": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "requires": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+      "requires": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "@algolia/autocomplete-preset-algolia": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+      "requires": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "requires": {}
+    },
+    "@algolia/cache-browser-local-storage": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.20.0.tgz",
+      "integrity": "sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==",
+      "requires": {
+        "@algolia/cache-common": "4.20.0"
+      }
+    },
+    "@algolia/cache-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.20.0.tgz",
+      "integrity": "sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ=="
+    },
+    "@algolia/cache-in-memory": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.20.0.tgz",
+      "integrity": "sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==",
+      "requires": {
+        "@algolia/cache-common": "4.20.0"
+      }
+    },
+    "@algolia/client-account": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.20.0.tgz",
+      "integrity": "sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==",
+      "requires": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "@algolia/client-analytics": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.20.0.tgz",
+      "integrity": "sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==",
+      "requires": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "@algolia/client-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.20.0.tgz",
+      "integrity": "sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==",
+      "requires": {
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "@algolia/client-personalization": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.20.0.tgz",
+      "integrity": "sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==",
+      "requires": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "@algolia/client-search": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.20.0.tgz",
+      "integrity": "sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==",
+      "requires": {
+        "@algolia/client-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
+    "@algolia/logger-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.20.0.tgz",
+      "integrity": "sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ=="
+    },
+    "@algolia/logger-console": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.20.0.tgz",
+      "integrity": "sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==",
+      "requires": {
+        "@algolia/logger-common": "4.20.0"
+      }
+    },
+    "@algolia/requester-browser-xhr": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.20.0.tgz",
+      "integrity": "sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==",
+      "requires": {
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
+    "@algolia/requester-common": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.20.0.tgz",
+      "integrity": "sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng=="
+    },
+    "@algolia/requester-node-http": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.20.0.tgz",
+      "integrity": "sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==",
+      "requires": {
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
+    "@algolia/transporter": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.20.0.tgz",
+      "integrity": "sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==",
+      "requires": {
+        "@algolia/cache-common": "4.20.0",
+        "@algolia/logger-common": "4.20.0",
+        "@algolia/requester-common": "4.20.0"
+      }
+    },
     "@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -13656,6 +14074,22 @@
         "regenerator-runtime": "^0.13.11"
       }
     },
+    "@docsearch/css": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
+      "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA=="
+    },
+    "@docsearch/react": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz",
+      "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==",
+      "requires": {
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.5.2",
+        "algoliasearch": "^4.19.1"
+      }
+    },
     "@esbuild/android-arm": {
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.17.tgz",
@@ -14561,9 +14995,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/react": {
-      "version": "18.2.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.18.tgz",
-      "integrity": "sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==",
+      "version": "18.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+      "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -14571,9 +15005,9 @@
       }
     },
     "@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@types/unist": {
       "version": "2.0.7",
@@ -14866,6 +15300,27 @@
       "peer": true,
       "requires": {}
     },
+    "algoliasearch": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.20.0.tgz",
+      "integrity": "sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==",
+      "requires": {
+        "@algolia/cache-browser-local-storage": "4.20.0",
+        "@algolia/cache-common": "4.20.0",
+        "@algolia/cache-in-memory": "4.20.0",
+        "@algolia/client-account": "4.20.0",
+        "@algolia/client-analytics": "4.20.0",
+        "@algolia/client-common": "4.20.0",
+        "@algolia/client-personalization": "4.20.0",
+        "@algolia/client-search": "4.20.0",
+        "@algolia/logger-common": "4.20.0",
+        "@algolia/logger-console": "4.20.0",
+        "@algolia/requester-browser-xhr": "4.20.0",
+        "@algolia/requester-common": "4.20.0",
+        "@algolia/requester-node-http": "4.20.0",
+        "@algolia/transporter": "4.20.0"
+      }
+    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -14979,6 +15434,18 @@
         "es-shim-unscopables": "^1.0.0"
       }
     },
+    "array.prototype.reduce": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.6.tgz",
+      "integrity": "sha512-UW+Mz8LG/sPSU8jRDCjVr6J/ZKAGpHfwrZ6kWTG5qCxIEiXdVshqGnu5vEZA8S1y6X4aCSbQZ0/EEsfvEvBiSg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      }
+    },
     "array.prototype.tosorted": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
@@ -15402,6 +15869,13 @@
       "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "requires": {
         "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
       }
     },
     "content-type": {
@@ -15558,9 +16032,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -15851,6 +16325,11 @@
         "which-typed-array": "^1.1.10"
       }
     },
+    "es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
+    },
     "es-module-lexer": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
@@ -19855,6 +20334,7 @@
       "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
       "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
       "requires": {
+        "array.prototype.reduce": "^1.0.4",
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
         "es-abstract": "^1.20.4"
@@ -21523,6 +22003,12 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "search-insights": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.9.0.tgz",
+      "integrity": "sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==",
+      "peer": true
+    },
     "section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -21795,6 +22281,15 @@
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
           "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
         }
       }
     },
diff --git a/package.json b/package.json
index bf577d0d7..90201662c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     }
   },
   "dependencies": {
+    "@docsearch/react": "^3.5.2",
     "@headlessui/react": "^1.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@rescript/react": "^0.12.0-alpha.3",
diff --git a/pages/_document.js b/pages/_document.js
index d609e8a96..7ac130378 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -6,16 +6,7 @@ const isProduction = process.env.ENV === "production";
 export default function Document() {
   return (
     <Html>
-      <Head>
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-        />
-        <script
-          type="text/javascript"
-          src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
-        />
-      </Head>
+      <Head />
       <body>
         <Main />
         <NextScript />
diff --git a/src/bindings/DocSearch.res b/src/bindings/DocSearch.res
new file mode 100644
index 000000000..e01ad2336
--- /dev/null
+++ b/src/bindings/DocSearch.res
@@ -0,0 +1,58 @@
+// API: https://github.com/algolia/docsearch/tree/v3.5.2/packages/docsearch-react/src/types
+type contentType =
+  | @as("content") Content
+  | @as("lvl0") Lvl0
+  | @as("lvl1") Lvl1
+  | @as("lvl2") Lvl2
+  | @as("lvl3") Lvl3
+  | @as("lvl4") Lvl4
+  | @as("lvl5") Lvl5
+  | @as("lvl6") Lvl6
+
+type hierarchy = {
+  lvl0: string,
+  lvl1: string,
+  lvl2: Js.Nullable.t<string>,
+  lvl3: Js.Nullable.t<string>,
+  lvl4: Js.Nullable.t<string>,
+  lvl5: Js.Nullable.t<string>,
+  lvl6: Js.Nullable.t<string>,
+}
+
+type docSearchHit = {
+  objectID: string,
+  content: Js.Nullable.t<string>,
+  url: string,
+  url_without_anchor: string,
+  @as("type") type_: contentType,
+  anchor: Js.Nullable.t<string>,
+  hierarchy: hierarchy,
+  // NOTE: docsearch need these two fields to highlight results
+  _highlightResult: {.},
+  _snippetResult: {.},
+}
+type transformItems = array<docSearchHit>
+
+type hitComponent = {
+  hit: docSearchHit,
+  children: React.element,
+}
+
+type item = {itemUrl: string}
+
+type navigator = {navigate: item => unit}
+
+type searchParameters = {facetFilters: array<string>}
+
+@module("@docsearch/react") @react.component
+external make: (
+  ~appId: string,
+  ~indexName: string,
+  ~apiKey: string,
+  ~transformItems: transformItems => transformItems=?,
+  ~hitComponent: hitComponent => React.element=?,
+  ~navigator: navigator=?,
+  ~onClose: unit => unit=?,
+  ~searchParameters: searchParameters=?,
+  ~initialScrollY: int=?,
+) => React.element = "DocSearchModal"
diff --git a/src/bindings/Webapi.res b/src/bindings/Webapi.res
index ff04069a5..27c3ff07a 100644
--- a/src/bindings/Webapi.res
+++ b/src/bindings/Webapi.res
@@ -6,6 +6,7 @@ module Document = {
 module ClassList = {
   type t
   @send external toggle: (t, string) => unit = "toggle"
+  @send external remove: (t, string) => unit = "remove"
 }
 
 module Element = {
@@ -14,6 +15,7 @@ module Element = {
   @set external setClassName: (Dom.element, string) => unit = "className"
   @get external classList: Dom.element => ClassList.t = "classList"
   @send external getBoundingClientRect: Dom.element => {..} = "getBoundingClientRect"
+  @send external addEventListener: (Dom.element, string, unit => unit) => unit = "addEventListener"
 
   module Style = {
     @scope("style") @set external width: (Dom.element, string) => unit = "width"
diff --git a/src/components/DocSearch.res b/src/components/DocSearch.res
deleted file mode 100644
index de610396c..000000000
--- a/src/components/DocSearch.res
+++ /dev/null
@@ -1,213 +0,0 @@
-type options = {
-  apiKey: string,
-  indexName: string,
-  inputSelector: string,
-}
-
-@val @scope("document")
-external activeElement: option<Dom.element> = "activeElement"
-
-@val @scope("window")
-external docsearch: option<options => unit> = "docsearch"
-
-type keyboardEventLike = {key: string, ctrlKey: bool, metaKey: bool}
-
-@val @scope("window")
-external addKeyboardEventListener: (string, keyboardEventLike => unit) => unit = "addEventListener"
-
-@val @scope("window")
-external removeKeyboardEventListener: (string, keyboardEventLike => unit) => unit =
-  "addEventListener"
-
-@send
-external keyboardEventPreventDefault: keyboardEventLike => unit = "preventDefault"
-
-type state =
-  | Active
-  | Inactive
-
-@get external isContentEditable: Dom.element => bool = "isContentEditable"
-@get external tagName: Dom.element => string = "tagName"
-@send external focus: Dom.element => unit = "focus"
-@send external blur: Dom.element => unit = "blur"
-@set external value: (Dom.element, string) => unit = "value"
-
-@react.component
-let make = () => {
-  // Used for the text input
-  let inputRef = React.useRef(Js.Nullable.null)
-  let (state, setState) = React.useState(_ => Inactive)
-
-  React.useEffect(() => {
-    switch docsearch {
-    | Some(init) =>
-      init({
-        apiKey: "d3d9d7cebf13a7b665e47cb85dc9c582",
-        indexName: "rescript-lang",
-        inputSelector: "#docsearch",
-      })
-    | None => ()
-    }
-
-    None
-  }, [])
-
-  React.useEffect(() => {
-    let isEditableTag = el =>
-      switch el->tagName {
-      | "TEXTAREA" | "SELECT" | "INPUT" => true
-      | _ => false
-      }
-
-    let focusSearch = e => {
-      switch activeElement {
-      | Some(el) if el->isEditableTag => ()
-      | Some(el) if el->isContentEditable => ()
-      | _ => {
-          setState(_ => Active)
-          inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(focus)
-
-          e->keyboardEventPreventDefault
-        }
-      }
-    }
-
-    let handleGlobalKeyDown = e => {
-      switch e.key {
-      | "/" => focusSearch(e)
-      | "k" if e.ctrlKey || e.metaKey => focusSearch(e)
-      | _ => ()
-      }
-    }
-
-    addKeyboardEventListener("keydown", handleGlobalKeyDown)
-    Some(() => removeKeyboardEventListener("keydown", handleGlobalKeyDown))
-  }, [setState])
-
-  let focusInput = () =>
-    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
-
-  let clearInput = () =>
-    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
-
-  let blurInput = () => inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
-
-  let onClick = _ => {
-    /* ReactEvent.Mouse.preventDefault(evt); */
-    setState(_ => Active)
-    clearInput()
-    focusInput()
-  }
-
-  let onBlur = _ => {
-    /* ReactEvent.Focus.preventDefault(evt); */
-    /* ReactEvent.Focus.stopPropagation(evt); */
-    clearInput()
-    setState(_ => Inactive)
-  }
-
-  let onKeyDown = evt => {
-    let key = ReactEvent.Keyboard.key(evt)
-
-    switch key {
-    | "Escape" => blurInput()
-    | _ => ()
-    }
-  }
-
-  let isActive = switch state {
-  | Active => true
-  | Inactive => false
-  }
-
-  let activeClass = isActive ? "text-white border border-gray-60" : ""
-  let activeInput = isActive ? "w-32 mr-3" : "w-0"
-
-  <div
-    className={activeClass ++ " bg-gray-100 border border-gray-70 hover:text-white hover:cursor-pointer flex justify-center p-2 px-3 rounded-lg"}
-    onClick>
-    <input
-      ref={ReactDOM.Ref.domRef(inputRef)}
-      type_="text"
-      id="docsearch"
-      onBlur
-      onKeyDown
-      className={"transition-all ease-in-out duration-150 text-white bg-gray-100 border-none focus:outline-none " ++
-      activeInput}
-    />
-    <Icon.MagnifierGlass className="text-gray-60 w-5 h-5" />
-  </div>
-}
-
-module Textbox = {
-  @react.component
-  let make = (~id: string) => {
-    React.useEffect(() => {
-      switch docsearch {
-      | Some(init) =>
-        init({
-          apiKey: "d3d9d7cebf13a7b665e47cb85dc9c582",
-          indexName: "rescript-lang",
-          inputSelector: "#" ++ id,
-        })
-      | None => ()
-      }
-      None
-    }, [])
-
-    // Used for the text input
-    let inputRef = React.useRef(Js.Nullable.null)
-    let (state, setState) = React.useState(_ => Inactive)
-
-    let focusInput = () =>
-      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
-
-    let _clearInput = () =>
-      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
-
-    let blurInput = () =>
-      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
-
-    let onClick = _ => {
-      /* ReactEvent.Mouse.preventDefault(evt); */
-      setState(_ => Active)
-      focusInput()
-    }
-
-    let onBlur = _ =>
-      /* ReactEvent.Focus.preventDefault(evt); */
-      /* ReactEvent.Focus.stopPropagation(evt); */
-      setState(_ => Inactive)
-
-    let onKeyDown = evt => {
-      let key = ReactEvent.Keyboard.key(evt)
-
-      switch key {
-      | "Escape" => blurInput()
-      | _ => ()
-      }
-    }
-
-    let isActive = switch state {
-    | Active => true
-    | Inactive => false
-    }
-
-    let activeClass = isActive ? "text-white border border-white-80" : "opacity-75"
-    let activeInput = isActive ? "" : ""
-
-    <div
-      className={activeClass ++ " hover:text-white hover:cursor-pointer bg-gray-80 flex items-center p-2 px-3 rounded"}
-      onClick>
-      <Icon.MagnifierGlass className="w-5 h-5 mr-3" />
-      <input
-        ref={ReactDOM.Ref.domRef(inputRef)}
-        type_="text"
-        id
-        onBlur
-        onKeyDown
-        className={"w-32 bg-gray-80 focus:outline-none " ++ activeInput}
-      />
-    </div>
-  }
-}
diff --git a/src/components/DocSearch.resi b/src/components/DocSearch.resi
deleted file mode 100644
index 14c4e280e..000000000
--- a/src/components/DocSearch.resi
+++ /dev/null
@@ -1,7 +0,0 @@
-module Textbox: {
-  @react.component
-  let make: (~id: string) => React.element
-}
-
-@react.component
-let make: unit => React.element
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index f1d1af009..02bbb42c2 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -372,9 +372,6 @@ module MobileNav = {
     let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"
     <div className="border-gray-80 border-t">
       <ul>
-        <li className=base>
-          <DocSearch.Textbox id="docsearch-mobile" />
-        </li>
         <li className=base>
           <Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
             {React.string("Playground")}
@@ -521,7 +518,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
       ref={ReactDOM.Ref.domRef(navRef)}
       id="header"
       style={ReactDOMStyle.make(~minWidth, ())}
-      className={fixedNav ++ " z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14"}>
+      className={fixedNav ++ " items-center z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14"}>
       <div className="flex justify-between items-center h-full w-full max-w-1280">
         <div className="h-8 w-8 lg:h-10 lg:w-32">
           <a
@@ -557,22 +554,22 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
               {React.string("Community")}
             </Link>
           </div>
-          <div className="hidden md:flex items-center">
-            <div className="hidden sm:block mr-6">
-              <DocSearch />
+          <div className="md:flex flex items-center">
+            <Search />
+            <div className="hidden md:flex items-center ml-5">
+              <a href=githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
+                <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
+              <a
+                href="https://twitter.com/rescriptlang"
+                rel="noopener noreferrer"
+                className={"mr-5 " ++ link}>
+                <Icon.Twitter className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
+              <a href=discourseHref rel="noopener noreferrer" className=link>
+                <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
+              </a>
             </div>
-            <a href=githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
-              <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
-            <a
-              href="https://twitter.com/rescriptlang"
-              rel="noopener noreferrer"
-              className={"mr-5 " ++ link}>
-              <Icon.Twitter className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
-            <a href=discourseHref rel="noopener noreferrer" className=link>
-              <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
-            </a>
           </div>
         </div>
       </div>
diff --git a/src/components/Search.res b/src/components/Search.res
new file mode 100644
index 000000000..58660f7fd
--- /dev/null
+++ b/src/components/Search.res
@@ -0,0 +1,164 @@
+let apiKey = "a2485ef172b8cd82a2dfa498d551399b"
+let indexName = "rescript-lang"
+let appId = "S32LNEY41T"
+
+@val @scope("document")
+external activeElement: option<Dom.element> = "activeElement"
+
+type keyboardEventLike = {key: string, ctrlKey: bool, metaKey: bool}
+@val @scope("window")
+external addKeyboardEventListener: (string, keyboardEventLike => unit) => unit = "addEventListener"
+
+@val @scope("window")
+external removeKeyboardEventListener: (string, keyboardEventLike => unit) => unit =
+  "addEventListener"
+
+type window
+@val external window: window = "window"
+@get external scrollY: window => int = "scrollY"
+
+@send
+external keyboardEventPreventDefault: keyboardEventLike => unit = "preventDefault"
+
+@get external tagName: Dom.element => string = "tagName"
+@get external isContentEditable: Dom.element => bool = "isContentEditable"
+
+type state = Active | Inactive
+
+let hit = ({hit, children}: DocSearch.hitComponent) => {
+  let toTitle = str =>
+    str->Js.String2.charAt(0)->Js.String2.toUpperCase ++ Js.String2.sliceToEnd(str, ~from=1)
+
+  let description = switch hit.url
+  ->Js.String2.split("/")
+  ->Js.Array2.sliceFrom(1)
+  ->Belt.List.fromArray {
+  | list{"blog" as r | "community" as r, ..._} => r->toTitle
+  | list{"docs", doc, version, ...rest} =>
+    let path = rest->Belt.List.toArray
+
+    let info =
+      path
+      ->Js.Array2.slice(~start=0, ~end_=Js.Array2.length(path) - 1)
+      ->Js.Array2.map(path =>
+        switch path {
+        | "api" => "API"
+        | other => toTitle(other)
+        }
+      )
+
+    [doc->toTitle, version->toTitle]->Js.Array2.concat(info)->Js.Array2.joinWith(" / ")
+  | _ => ""
+  }
+
+  <Next.Link href={hit.url} className="flex flex-col w-full">
+    <span className="text-gray-60 captions px-4 pt-3 pb-1 block">
+      {description->React.string}
+    </span>
+    children
+  </Next.Link>
+}
+
+let transformItems = (items: DocSearch.transformItems) => {
+  items->Belt.Array.keepMap(item => {
+    let url = try Webapi.URL.make(item.url)->Some catch {
+    | Js.Exn.Error(obj) =>
+      Js.Console.error2(`Failed to parse URL ${item.url}`, obj)
+      None
+    }
+    switch url {
+    | Some({pathname, hash}) => {...item, url: pathname ++ hash}->Some
+    | None => None
+    }
+  })
+}
+
+@react.component
+let make = () => {
+  let (state, setState) = React.useState(_ => Inactive)
+  let router = Next.Router.useRouter()
+
+  let version = switch Url.parse(router.route).version {
+  | Version(v) => v
+  | _ => "latest"
+  }
+
+  let handleCloseModal = () => {
+    let () = switch ReactDOM.querySelector(".DocSearch-Modal") {
+    | Some(modal) =>
+      switch ReactDOM.querySelector("body") {
+      | Some(body) =>
+        open Webapi
+        body->Element.classList->ClassList.remove("DocSearch--active")
+        modal->Element.addEventListener("transitionend", () => {
+          setState(_ => Inactive)
+        })
+      | None => setState(_ => Inactive)
+      }
+    | None => ()
+    }
+  }
+
+  React.useEffect(() => {
+    let isEditableTag = el =>
+      switch el->tagName {
+      | "TEXTAREA" | "SELECT" | "INPUT" => true
+      | _ => false
+      }
+
+    let focusSearch = e => {
+      switch activeElement {
+      | Some(el) if el->isEditableTag || el->isContentEditable => ()
+      | _ =>
+        setState(_ => Active)
+        e->keyboardEventPreventDefault
+      }
+    }
+
+    let handleGlobalKeyDown = e => {
+      switch e.key {
+      | "/" => focusSearch(e)
+      | "k" if e.ctrlKey || e.metaKey => focusSearch(e)
+      | "Escape" => handleCloseModal()
+      | _ => ()
+      }
+    }
+    addKeyboardEventListener("keydown", handleGlobalKeyDown)
+    Some(() => removeKeyboardEventListener("keydown", handleGlobalKeyDown))
+  }, [setState])
+
+  let onClick = _ => {
+    setState(_ => Active)
+  }
+
+  let onClose = React.useCallback(() => {
+    handleCloseModal()
+  }, [setState])
+
+  <>
+    <button onClick type_="button" className="text-gray-60 hover:text-fire-50 p-2">
+      <Icon.MagnifierGlass className="fill-current" />
+    </button>
+    {switch state {
+    | Active =>
+      switch ReactDOM.querySelector("body") {
+      | Some(element) =>
+        ReactDOM.createPortal(
+          <DocSearch
+            apiKey
+            appId
+            indexName
+            onClose
+            searchParameters={facetFilters: ["version:" ++ version]}
+            initialScrollY={window->scrollY}
+            transformItems={transformItems}
+            hitComponent=hit
+          />,
+          element,
+        )
+      | None => React.null
+      }
+    | Inactive => React.null
+    }}
+  </>
+}
diff --git a/styles/_docsearch.css b/styles/_docsearch.css
index bcb0f9c46..41cee25b6 100644
--- a/styles/_docsearch.css
+++ b/styles/_docsearch.css
@@ -1,55 +1,342 @@
 /* purgecss start ignore */
+.DocSearch-Button {
+  @apply flex justify-center select-none cursor-pointer p-2 px-3;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  @apply text-fire-30;
+}
+
+.DocSearch-Search-Icon {
+  stroke-width: 2;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  @apply text-gray-60;
+}
+
+.DocSearch-Button-Placeholder {
+  display: none !important;
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+/* Modal */
+/* Body modifier */
+
+.DocSearch--active {
+  /*
+   * We need to mark it as important because some websites override the
+   * `style` attribute (e.g. Docusaurus).
+   */
+  overflow: hidden !important;
+}
+
+/* Container & Modal */
+
+.DocSearch-Container {
+  height: 100vh;
+  width: 100vw;
+  z-index: 200;
+  padding: 10vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(0px);
+  cursor: inherit !important;
+  transition: all .05s ease;
+  @apply fixed top-0 left-0 flex flex-col;
+}
+
+.DocSearch--active {
+  .DocSearch-Container {
+    backdrop-filter: blur(3px);
+  }
+}
+
+.DocSearch-Container a {
+  text-decoration: none;
+}
+
+.DocSearch-Link {
+  font: inherit;
+  @apply appearance-none bg-none border-none cursor-pointer m-0 p-0 text-red-500;
+}
+
+.DocSearch-Modal {
+  @apply relative min-h-0 mx-auto bg-white w-full flex flex-col shadow-lg max-w-screen-md rounded-lg;
+  transform: scale(0.95);
+  opacity: 0;
+  transition: all .2s ease;
+}
+
+.DocSearch--active {
+  .DocSearch-Modal {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Modal Searchbox */
+
+.DocSearch-SearchBar {
+  border-bottom: 1px solid;
+  @apply flex items-center pl-4 pr-4 border-gray-20;
+}
+
+.DocSearch-Form {
+  @apply relative w-full m-0 flex items-center h-14;
+}
+
+.DocSearch-Input {
+  @apply w-full appearance-none outline-none bg-transparent border-none flex-1 text-14 px-4;
+}
+
+.DocSearch-Input::placeholder {
+  @apply opacity-100 text-gray-40;
+}
+
+.DocSearch-Input::-webkit-search-cancel-button,
+.DocSearch-Input::-webkit-search-decoration,
+.DocSearch-Input::-webkit-search-results-button,
+.DocSearch-Input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.DocSearch-LoadingIndicator,
+.DocSearch-MagnifierLabel,
+.DocSearch-Reset {
+  @apply m-0 p-0;
+}
+
+.DocSearch-MagnifierLabel,
+.DocSearch-Reset {
+  @apply flex items-center justify-between text-red-500;
+}
+
+.DocSearch-Container--Stalled .DocSearch-MagnifierLabel {
+  @apply hidden;
+}
+
+.DocSearch-LoadingIndicator {
+  @apply hidden;
+}
+
+.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
+  @apply flex items-center justify-between text-red-500;
+}
+
+.DocSearch-Reset {
+  @apply hidden;
+}
+
+.DocSearch-LoadingIndicator svg,
+.DocSearch-MagnifierLabel svg {
+  @apply w-4 h-4;
+}
+
+.DocSearch-Cancel {
+  font-size: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.506 6h3.931V4.986H1.736v-1.39h2.488V2.583H1.736V1.196h2.69V.182H.506V6ZM8.56 1.855h1.18C9.721.818 8.87.102 7.574.102c-1.276 0-2.21.705-2.205 1.762-.003.858.602 1.35 1.585 1.585l.634.159c.633.153.986.335.988.727-.002.426-.406.716-1.03.716-.64 0-1.1-.295-1.14-.878h-1.19c.03 1.259.931 1.91 2.343 1.91 1.42 0 2.256-.68 2.259-1.745-.003-.969-.733-1.483-1.744-1.71l-.523-.125c-.506-.117-.93-.304-.92-.722 0-.375.332-.65.934-.65.588 0 .949.267.994.724ZM15.78 2.219C15.618.875 14.6.102 13.254.102c-1.537 0-2.71 1.086-2.71 2.989 0 1.898 1.153 2.989 2.71 2.989 1.492 0 2.392-.992 2.526-2.063l-1.244-.006c-.117.623-.606.98-1.262.98-.883 0-1.483-.656-1.483-1.9 0-1.21.591-1.9 1.492-1.9.673 0 1.159.389 1.253 1.028h1.244Z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
+  background-size: 57.1428571429% auto;
+  @apply w-9 h-7 bg-no-repeat bg-center appearance-none border border-gray-20 rounded;
+}
+
+/* Modal Dropdown */
+
+.DocSearch-Dropdown {
+  @apply pl-4 pr-4 overflow-y-auto;
+}
+
+.DocSearch-Dropdown ul {
+  @apply list-none m-0 p-0;
+}
+
+.DocSearch-Title {
+  @apply text-gray-40 text-18 pb-2 self-center;
+}
 
-/* Main dropdown wrapper */
-.algolia-autocomplete .ds-dropdown-menu {
-  width: 500px;
+.DocSearch-Logo a {
+  @apply flex items-center;
+}
+.DocSearch-Logo .DocSearch-Label {
+  @apply text-gray-40 text-11;
+}
+
+.DocSearch-Logo svg {
+  color: #5468ff;
+  @apply ml-1;
+}
+
+/* Hit */
+
+.DocSearch-Hits:last-of-type {
+  @apply mb-2;
+}
+
+.DocSearch-Hits mark {
+  @apply text-red-500 bg-transparent;
+}
+
+.DocSearch-HitsFooter {
+  @apply hidden;
+}
+
+.DocSearch-Hit {
+  /* border-radius: 4px; */
+  @apply relative flex rounded-s border-b border-gray-20;
+}
+
+.DocSearch-Hit a {
+  border-radius: 4px;
+  @apply block w-full;
+}
+
+.DocSearch-Hit-source {
+  @apply top-0 sticky z-100 pt-3 pb-3 text-16 font-semibold bg-white text-gray-80;
+}
+
+.DocSearch-Hit--deleting {
+  opacity: 0;
+  transition: all 250ms linear;
+}
+
+.DocSearch-Hit--favoriting {
+  @apply scale-0 origin-center;
+}
+
+.DocSearch-Hit-Tree {
+  @apply text-gray-40 opacity-50 stroke-2 w-5 h-7;
+}
+
+.DocSearch-Hit[aria-selected='true'] a {
+  @apply bg-gray-20;
+}
+
+.DocSearch-Hit[aria-selected='true'] mark {
+  text-decoration: none;
+}
+
+.DocSearch-Hit-Container {
+  @apply flex items-center flex-row px-4 pb-4 pt-1 text-gray-40;
+}
+
+.DocSearch-Hit-icon {
+  /* display: none; */
+  @apply w-5 h-5 stroke-1 text-gray-40;
+}
+
+.DocSearch-Hit-action {
+  @apply flex items-center stroke-1;
 }
 
-/* Main category (eg. Getting Started) */
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
-  /*color: darkgray;*/
-  /*border: 1px solid gray;*/
+.DocSearch-Hit-action svg {
+  @apply block w-5 h-5;
 }
 
-/* Category (eg. Downloads) */
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
-  color: gray;
+.DocSearch-Hit-action + .DocSearch-Hit-action {
+  margin-left: 6px;
 }
 
-/* Title (eg. Bootstrap CDN) */
-.algolia-autocomplete .algolia-docsearch-suggestion--title {
-  font-weight: bold;
-  color: black;
+.DocSearch-Hit-action-button {
+  @apply appearance-none bg-transparent border-none cursor-pointer;
 }
 
-/* Description description (eg. Bootstrap currently works...) */
-.algolia-autocomplete .algolia-docsearch-suggestion--text {
-  font-size: 0.8rem;
-  color: gray;
+svg.DocSearch-Hit-Select-Icon {
+  display: none;
 }
 
-/* Highlighted text */
-.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
-  @apply text-fire bg-fire-5 shadow-none !important;
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
+  display: block;
 }
 
-@media (max-width: 576px) {
-  .algolia-autocomplete .ds-dropdown-menu {
-    max-width: calc(100vw - 32px) !important;
-    min-width: calc(100vw - 32px) !important;
-    width: 100%;
-    @apply -ml-10 !important;
+.DocSearch-Hit-action-button:hover path,
+.DocSearch-Hit-action-button:focus path {
+  @apply text-fire-50;
+}
+
+.DocSearch-Hit-content-wrapper {
+  @apply flex flex-auto flex-col justify-center whitespace-nowrap overflow-ellipsis relative font-medium pl-4 pr-4 overflow-hidden;
+}
+
+.DocSearch-Hit-title {
+  @apply text-14 text-gray-60;
+}
+
+.DocSearch-Hit-path {
+  @apply text-12;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title,
+.DocSearch-Hit[aria-selected='true'] mark,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
+  color: none;
+}
+
+/* No Results - Start Screen - Error Screen */
+
+.DocSearch-NoResults,
+.DocSearch-StartScreen,
+.DocSearch-ErrorScreen {
+  @apply flex flex-col pt-5;
+}
+
+.DocSearch-Screen-Icon {
+  @apply pb-3 text-gray-40 self-center;
+}
+
+.DocSearch-Help {
+  @apply text-gray-40 pb-2 text-center;
+}
+
+.DocSearch-Prefill {
+  border-radius: 4px;
+  @apply appearance-none bg-transparent border-none cursor-pointer p-4 text-gray-40 text-14 font-medium w-full text-left;
+}
+
+.DocSearch-Prefill:hover,
+.DocSearch-Prefill:focus {
+  outline: none;
+  text-decoration: none;
+  @apply bg-gray-20;
+}
+
+/* Modal Footer */
+
+.DocSearch-Footer {
+  @apply flex flex-row-reverse flex-shrink-0 justify-between relative select-none w-full z-100 p-4;
+}
+
+.DocSearch-Commands {
+  display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 750px) {
+  .DocSearch-Dropdown {
+    height: 100%;
   }
-  .algolia-autocomplete .algolia-docsearch-suggestion--content {
-    width: 100% !important;
-    padding-left: 0 !important;
+
+  .DocSearch-Container {
+    padding: 2vh;
   }
-  .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
-    display: none !important;
+
+  /* .DocSearch-Hit-content-wrapper { */
+  /*   display: flex; */
+  /*   position: relative; */
+  /*   width: 80%; */
+  /* } */
+
+  .DocSearch-Modal {
+    max-width: 95%;
   }
-  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
-    display: none !important;
+
+  .DocSearch-Hit-Tree {
+    display: none;
   }
 }
-
 /* purgecss end ignore */