Add standalone search widget documentation

fern/products/ask-fern/ask-fern.yml

@@ -31,6 +31,8 @@ navigation:
         path: ./pages/features/rbac.mdx
       - page: Ask Fern Slack app
         path: ./pages/features/slack-app.mdx
+      - page: Standalone search widget
+        path: ./pages/features/search-widget.mdx
   - api: API reference
     api-name: fai
     paginated: true

fern/products/ask-fern/pages/features/search-widget.mdx

@@ -0,0 +1,182 @@
+---
+title: Standalone search widget
+description: Embed Ask Fern's AI-powered search in any React application with the standalone search widget.
+---
+
+The standalone search widget lets you embed Ask Fern's AI-powered search capabilities in any React application outside of your Fern documentation site. This is useful for adding documentation search to your main product, dashboard, or support portal.
+
+<Note>
+  The search widget requires React 19. All other dependencies are bundled with the package.
+</Note>
+
+## Installation
+
+Install the package and its peer dependencies:
+
+<Tabs>
+<Tab title="npm">
+```bash
+npm install @fern-api/search-widget react react-dom
+```
+</Tab>
+<Tab title="pnpm">
+```bash
+pnpm add @fern-api/search-widget react react-dom
+```
+</Tab>
+</Tabs>
+
+## Usage
+
+Import the component and styles, then add the `SearchModal` component to your application:
+
+```jsx
+import { SearchModal } from '@fern-api/search-widget';
+import '@fern-api/search-widget/styles';
+
+function App() {
+  return (
+    <div>
+      <SearchModal
+        domain="https://your-docs-site.com"
+        lang="en"
+      >
+        Search Documentation
+      </SearchModal>
+    </div>
+  );
+}
+```
+
+The `SearchModal` component renders a button that opens a search modal when clicked. The modal provides the same AI-powered search experience as your Fern documentation site.
+
+## Props
+
+The `SearchModal` component accepts the following props:
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `domain` | `string` | Yes | The documentation domain to search against (e.g., `"https://buildwithfern.com/learn"`) |
+| `lang` | `string` | No | Language code for the search interface. Defaults to `"en"` |
+| `icon` | `React.ReactNode` | No | Icon element to display in the button |
+| `className` | `string` | No | Additional CSS classes for the button |
+| `style` | `object` | No | Inline styles for the button |
+| `children` | `React.ReactNode` | No | Button content (text, icons, etc.) |
+
+All standard HTML button props are also supported and forwarded to the trigger button.
+
+## Styling the button
+
+You can style the trigger button using inline styles, CSS classes, or the default class.
+
+### Inline styles
+
+```jsx
+<SearchModal
+  domain="https://docs.example.com"
+  lang="en"
+  style={{
+    padding: '0.75rem 1.5rem',
+    fontSize: '1rem',
+    background: '#2563eb',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer'
+  }}
+>
+  Search Documentation
+</SearchModal>
+```
+
+### CSS classes
+
+```jsx
+<SearchModal
+  domain="https://docs.example.com"
+  lang="en"
+  className="my-search-button"
+>
+  Search
+</SearchModal>
+```
+
+```css
+.my-search-button {
+  padding: 0.75rem 1.5rem;
+  background: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 6px;
+}
+```
+
+### Default class
+
+The button has a `fern-search-button` class that you can target in your stylesheets:
+
+```css
+.fern-search-button {
+  padding: 0.75rem 1.5rem;
+  background: #2563eb;
+  color: white;
+}
+```
+
+## Complete example
+
+```jsx
+import { SearchModal } from '@fern-api/search-widget';
+import '@fern-api/search-widget/styles';
+
+function App() {
+  return (
+    <div className="app">
+      <header>
+        <h1>My Application</h1>
+        <SearchModal
+          domain="https://docs.mysite.com"
+          lang="en"
+          className="search-trigger"
+        >
+          Search Docs
+        </SearchModal>
+      </header>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Features
+
+The search widget includes the following features:
+
+- **AI-powered search**: Natural language search with AI-generated responses
+- **Real-time results**: Fast search results as you type
+- **Code highlighting**: Syntax-highlighted code blocks in search results
+- **Keyboard navigation**: Full keyboard support for navigation
+- **Responsive design**: Works on desktop and mobile devices
+
+## Troubleshooting
+
+### Styles not loading
+
+Make sure you import the CSS file:
+
+```jsx
+import '@fern-api/search-widget/styles';
+```
+
+### Button not visible
+
+The button shows "Loading..." while fetching API keys. If it disappears, check that the `domain` prop is a valid documentation site URL and that network requests to `${domain}/api/fern-docs/search/api-key` succeed.
+
+### Modal not opening
+
+Ensure React 19 peer dependencies are installed:
+
+```bash
+npm install react@19 react-dom@19
+```

fern/products/docs/pages/changelog/2026-01-08.mdx

@@ -0,0 +1,18 @@
+## Standalone search widget
+
+You can now embed Ask Fern's AI-powered search in any React application using the new `@fern-api/search-widget` package. This standalone widget provides the same search experience as your Fern documentation site, making it easy to add documentation search to your main product, dashboard, or support portal.
+
+```jsx
+import { SearchModal } from '@fern-api/search-widget';
+import '@fern-api/search-widget/styles';
+
+function App() {
+  return (
+    <SearchModal domain="https://your-docs-site.com">
+      Search Documentation
+    </SearchModal>
+  );
+}
+```
+
+Learn more about the [standalone search widget](/learn/ask-fern/features/search-widget).