---
title: 安装与接入
description: 添加 Search、注册翻译目录并挂载搜索界面。
order: 10
toc:
  - id: add-the-package
    title: 添加包
  - id: import-styles
    title: 导入样式
  - id: mount-search
    title: 挂载搜索
---

## 添加包 {#add-the-package}

将 Search 加入应用依赖：

```json
{
  "dependencies": {
    "@workspace/search": "workspace:*"
  }
}
```

## 导入样式 {#import-styles}

在应用的全局样式入口导入一次 Search 样式，使 Tailwind 扫描包内使用的 utilities：

```css
@import "@workspace/search/globals.css";
```

同时将 `@workspace/search/locales/{locale}` 加入应用的国际化目录来源。

## 挂载搜索 {#mount-search}

```tsx
import { SearchDialog, SearchProvider, SearchTrigger } from "@workspace/search"

;<SearchProvider adapter={searchAdapter} onSelect={openResult}>
  <SearchTrigger>搜索</SearchTrigger>
  <SearchDialog />
</SearchProvider>
```

`SearchDialog` 默认注册 `Mod+K`。如果应用已经统一管理快捷键，可以传入 `hotkey={false}`。