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

# 独立搜索组件

> 使用 @fern-api/search-widget 包在任何 React 应用程序中嵌入 Fern 的 AI 驱动搜索。

[`@fern-api/search-widget`](https://www.npmjs.com/package/@fern-api/search-widget) 包提供了一个独立的 React 组件，可以将 Ask Fern 的 AI 驱动搜索功能带到您的 Fern Docs 网站之外的任何 React 应用程序中。在您的仪表板、营销网站或内部工具中嵌入搜索模态框，让用户无需离开其工作流程即可找到相关文档。

## 前提条件

* **React 19** — 所有其他依赖项都已打包。
* **启用了 [Ask Fern](/learn/zh/docs/ai-features/ask-fern/overview) 的实时云托管 Fern Docs 站点** — 该组件在运行时连接到您已发布的文档站点。不支持自托管和本地预览环境。
* **公开文档** — 该组件仅支持公开文档。如果您的站点使用[身份验证](/learn/zh/docs/authentication/overview)，该组件将仅返回未经身份验证的结果。

## 快速开始

#### 安装包

**`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
```

该包大约为 2 MB（JS + CSS 合计）。

#### 添加搜索模态框

导入 `SearchModal` 和打包的样式，然后使用您的文档域名渲染组件。该组件会渲染一个按钮，点击时打开搜索模态框。

```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">
      搜索文档
    </SearchModal>
  );
}
```

#### 自定义触发按钮

`SearchModal` 组件会渲染一个打开搜索模态框的按钮。使用 `className`、`style` 或定位默认的 `fern-search-button` 类来设置样式。所有标准的 HTML 按钮属性都会被转发。

```tsx
<SearchModal
  domain="https://docs.example.com"
  lang="en"
  className="my-search-button"
>
  搜索文档
</SearchModal>
```

像 `* { margin: 0; padding: 0; }` 这样的全局 CSS 重置会破坏模态框的内部布局。将全局重置限定范围，排除搜索模态框内的元素。

## 属性

还支持所有标准的 HTML 按钮属性，并转发到触发按钮。

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

您已发布的 Fern Docs 站点的 URL（例如，`https://docs.example.com`）。如果您的文档不在根目录，请包含完整路径（例如，`https://buildwithfern.com/learn`）。

---

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

搜索界面的语言代码。

---

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

在按钮中显示的图标元素。

---

**`className`** `string`

触发按钮的 CSS 类名。

---

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

触发按钮的内联样式。

---

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

按钮内容（文本、图标等）。

---

**`disabled`** `boolean`

禁用按钮。

---

**`onClick`** `function`

在模态框打开之前运行的额外点击处理程序。

---