chore(composable): add DocSearchButton + DocSearchModal example (#2876)

Author: LorrisSaintGenez

packages/website/docs/examples.mdx

@@ -5,6 +5,8 @@ description: live demos showing how to use and extend docsearch beyond documenta
 ---
 
 import { DocSearch } from '@docsearch/react';
+import { DocSearch as DocSearchProvider } from '@docsearch/core';
+import { DocSearchButton, DocSearchModal } from '@docsearch/modal';
 import { DocSearchSidepanel } from '@docsearch/react/sidepanel';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import '@docsearch/css/dist/style.css';
@@ -98,6 +100,51 @@ The sidepanel provides a persistent chat interface anchored to the side of the p
 
 ---
 
+## Composable API: DocSearchButton + DocSearchModal
+
+Use the [Composable API](/docs/composable-api) to render the button and modal as separate components. This gives you explicit control over where each piece is rendered and when the modal code is loaded.
+
+```jsx
+import { DocSearch } from '@docsearch/core';
+import { DocSearchButton, DocSearchModal } from '@docsearch/modal';
+
+import '@docsearch/css/style.css';
+
+<DocSearch>
+  <DocSearchButton translations={{ buttonText: 'Composable search (demo)' }} />
+  <DocSearchModal
+    appId="PMZUYBQDAK"
+    indexName="docsearch"
+    apiKey="a00716d83c64f6c61905c078b7d5ab66"
+    askAi={{
+      assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
+      agentStudio: true,
+    }}
+  />
+</DocSearch>;
+```
+
+<BrowserOnly>
+  {() => (
+    <DocSearchProvider>
+      <DocSearchButton
+        translations={{ buttonText: 'Composable search (demo)' }}
+      />
+      <DocSearchModal
+        appId="PMZUYBQDAK"
+        indexName="docsearch"
+        apiKey="a00716d83c64f6c61905c078b7d5ab66"
+        askAi={{
+          assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
+          agentStudio: true,
+        }}
+      />
+    </DocSearchProvider>
+  )}
+</BrowserOnly>
+
+---
+
 ## Custom hit rendering (`hitComponent`)
 
 Replace the default hit markup to match your brand and layout. below is a minimal example of a custom component.

packages/website/package.json

@@ -19,6 +19,7 @@
     "@docsearch/core": "workspace:*",
     "@docsearch/css": "workspace:*",
     "@docsearch/docusaurus-adapter": "workspace:*",
+    "@docsearch/modal": "workspace:*",
     "@docsearch/react": "workspace:*",
     "@docsearch/sidepanel": "workspace:*",
     "@docusaurus/core": "3.9.2",

yarn.lock

@@ -2669,6 +2669,7 @@ __metadata:
     "@docsearch/core": "workspace:*"
     "@docsearch/css": "workspace:*"
     "@docsearch/docusaurus-adapter": "workspace:*"
+    "@docsearch/modal": "workspace:*"
     "@docsearch/react": "workspace:*"
     "@docsearch/sidepanel": "workspace:*"
     "@docusaurus/core": "npm:3.9.2"