diff --git a/docs/my-website/src/theme/SearchBar/Canary.jsx b/docs/my-website/src/theme/SearchBar/Canary.jsx
new file mode 100644
index 0000000000..9805be67fa
--- /dev/null
+++ b/docs/my-website/src/theme/SearchBar/Canary.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function Canary({ path }) {
+  const [loaded, setLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    Promise.all([
+      import("@getcanary/web/components/canary-root"),
+      import("@getcanary/web/components/canary-provider-pagefind"),
+      import("@getcanary/web/components/canary-modal"),
+      import("@getcanary/web/components/canary-trigger-searchbar"),
+      import("@getcanary/web/components/canary-content"),
+      import("@getcanary/web/components/canary-search"),
+      import("@getcanary/web/components/canary-search-input"),
+      import("@getcanary/web/components/canary-search-results"),
+    ])
+      .then(() => setLoaded(true))
+      .catch((e) =>
+        console.error("Maybe you forgot to install '@getcanary/web'?", e),
+      );
+  }, []);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <canary-root framework="docusaurus">
+      <canary-provider-pagefind path={path}>
+        <canary-modal>
+          <canary-trigger-searchbar slot="trigger"></canary-trigger-searchbar>
+          <canary-content slot="content">
+            <canary-search slot="search">
+              <canary-search-input slot="input"></canary-search-input>
+              <canary-search-results slot="results"></canary-search-results>
+            </canary-search>
+          </canary-content>
+        </canary-modal>
+      </canary-provider-pagefind>
+    </canary-root>
+  );
+}
diff --git a/docs/my-website/src/theme/SearchBar/index.jsx b/docs/my-website/src/theme/SearchBar/index.jsx
new file mode 100644
index 0000000000..da018f1087
--- /dev/null
+++ b/docs/my-website/src/theme/SearchBar/index.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { usePluginData } from "@docusaurus/useGlobalData";
+
+import Canary from "./Canary";
+
+export default function Index() {
+  const { siteConfig } = useDocusaurusContext();
+  const { options } = usePluginData("docusaurus-plugin-pagefind-canary");
+
+  const [path, setPath] = React.useState("");
+
+  React.useEffect(() => {
+    setPath(`${siteConfig.baseUrl}pagefind/pagefind.js`);
+  }, [siteConfig]);
+
+  React.useEffect(() => {
+    for (const [k, v] of Object.entries(options?.styles ?? {})) {
+      document.body.style.setProperty(k, v);
+    }
+  }, [options]);
+
+  if (!path) {
+    return null;
+  }
+
+  return <Canary path={path} />;
+}