> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Search modal with AI chat

> Embed Fern's search modal, combining keyword search with AI chat, in any React application.

`SearchModal` renders a trigger button that opens a modal over the page, combining keyword search with AI chat. It's one of the two components in the [`@fern-api/search-widget` package](/learn/docs/ai-features/search-widget/overview), which covers the prerequisites and the Content Security Policy the widget needs.

## Setup

#### Install the package

**`npm`**

```bash npm
npm install @fern-api/search-widget react@19 react-dom@19
```

**`pnpm`**

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

**`yarn`**

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

#### Render the modal

Import the component and the bundled styles, then render it with your docs domain. The component renders its own trigger button, and citations in its answers link to your docs domain and open in a new tab.

```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>
  );
}
```

#### Style the trigger

Style the trigger button with `className`, `style`, or by targeting the default `fern-search-button` class.

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

A global CSS reset like `* { margin: 0; padding: 0; }` will break the modal's internal layout. Scope global resets to exclude elements inside the search modal.

## Properties

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

**`domain`** `string` — required

The URL of your published Fern Docs site (for example, `https://docs.example.com`). Include the full path if your docs aren't at the root (for example, `https://buildwithfern.com/learn`).

---

**`lang`** `string` — default: en

Language code for the interface.

---

**`icon`** `React.ReactNode`

Icon element to display in the trigger button.

---

**`children`** `React.ReactNode`

Trigger button content (text, icons, etc.).

---

**`className`** `string`

CSS class names for the trigger button.

---

**`style`** `React.CSSProperties`

Inline styles for the trigger button.

---

**`disabled`** `boolean`

Disables the button.

---

**`onClick`** `function`

Additional handler that runs before the modal opens.

---