If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.

GET https://buildwithfern.com/learn/docs/ai-features/ask-fern/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiJiMjEyZDgxNi1lNjA1LTRkYTMtODdiNC0wZjY0MDhmOTg3MTciLCJleHAiOjE3NzU3ODI0MzksImlhdCI6MTc3NTc4MjEzOX0.wf7uvGZPsxT9L5D266XIgl2Kf36kHh2MR4azz7i5_e0

---

***

title: Standalone search widget
description: Embed Fern's AI-powered search in any React application using the @fern-api/search-widget package.
---------------------

For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

The [`@fern-api/search-widget`](https://www.npmjs.com/package/@fern-api/search-widget) package provides a standalone React component that brings Ask Fern's AI-powered search to any React application outside of your Fern Docs site. Embed a search modal in your dashboard, marketing site, or internal tool so users can find relevant documentation without leaving their workflow.

<Frame caption="Search widget embedded in a dashboard. Try the [live demo](https://fern-demo.github.io/fern-search-widget-demo/) or browse the [demo source](https://github.com/fern-demo/fern-search-widget-demo).">
  <video autoPlay muted loop>
    <source src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/5d6b73b949f2e2d73e1a5d28cee18276ef18cf125a7cccb5e2895f59bcc593e1/products/docs/pages/ask-fern/assets/search-widget.mp4" type="video/mp4" />
  </video>
</Frame>

## Prerequisites

* **React 19** — all other dependencies are bundled.
* **A live, cloud-hosted Fern Docs site with [Ask Fern enabled](/learn/docs/ai-features/ask-fern/overview)** — the widget connects to your published docs site at runtime. Self-hosted and local preview environments aren't supported.
* **Public documentation** — the widget only supports public docs. If your site uses [authentication](/learn/docs/authentication/overview), the widget will only return unauthenticated results.

## Getting started

<Steps>
  <Step title="Install the package">
    <CodeBlocks>
      ```bash npm
      npm install @fern-api/search-widget react@19 react-dom@19
      ```

      ```bash pnpm
      pnpm add @fern-api/search-widget react@19 react-dom@19
      ```

      ```bash yarn
      yarn add @fern-api/search-widget react@19 react-dom@19
      ```
    </CodeBlocks>
  </Step>

  <Step title="Add the search modal">
    Import `SearchModal` and the bundled styles, then render the component with your docs domain. The component renders a button that opens a search modal when clicked.

    ```tsx
    import { SearchModal } from '@fern-api/search-widget';
    import '@fern-api/search-widget/styles';

    function App() {
      return (
        <SearchModal domain="https://docs.example.com" lang="en">
          Search Docs
        </SearchModal>
      );
    }
    ```
  </Step>

  <Step title="Customize the trigger button">
    The `SearchModal` component renders a button that opens the search modal. Style it with `className`, `style`, or target the default `fern-search-button` class. All standard HTML button attributes are forwarded.

    ```tsx
    <SearchModal
      domain="https://docs.example.com"
      lang="en"
      className="my-search-button"
    >
      Search Docs
    </SearchModal>
    ```
  </Step>
</Steps>

## Properties

All standard HTML button attributes are also supported and forwarded to the trigger button.

<ParamField path="domain" type="string" required={true}>
  The URL of your published Fern Docs site (for example, `https://docs.example.com`).
</ParamField>

<ParamField path="lang" type="string" default="en">
  Language code for the search interface.
</ParamField>

<ParamField path="icon" type="React.ReactNode">
  Icon element to display in the button.
</ParamField>

<ParamField path="className" type="string">
  CSS class names for the trigger button.
</ParamField>

<ParamField path="style" type="React.CSSProperties">
  Inline styles for the trigger button.
</ParamField>

<ParamField path="children" type="React.ReactNode">
  Button content (text, icons, etc.).
</ParamField>

<ParamField path="disabled" type="boolean">
  Disables the button.
</ParamField>

<ParamField path="onClick" type="function">
  Additional click handler that runs before the modal opens.
</ParamField>