Maofeng
48 lines
1.1 KiB
Plaintext
48 lines
1.1 KiB
Plaintext
---
|
|
title: Installation and setup
|
|
description: Add Search, register its catalog, and mount the search surface.
|
|
order: 10
|
|
toc:
|
|
- id: add-the-package
|
|
title: Add the package
|
|
- id: import-styles
|
|
title: Import styles
|
|
- id: mount-search
|
|
title: Mount search
|
|
---
|
|
|
|
## Add the package {#add-the-package}
|
|
|
|
Add Search to the consuming application:
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"@workspace/search": "workspace:*"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Import styles {#import-styles}
|
|
|
|
Import the Search stylesheet once from the application's global stylesheet so Tailwind scans the utilities used by the package:
|
|
|
|
```css
|
|
@import "@workspace/search/globals.css";
|
|
```
|
|
|
|
Also add `@workspace/search/locales/{locale}` to the application's internationalization catalog sources.
|
|
|
|
## Mount search {#mount-search}
|
|
|
|
```tsx
|
|
import { SearchDialog, SearchProvider, SearchTrigger } from "@workspace/search"
|
|
|
|
;<SearchProvider adapter={searchAdapter} onSelect={openResult}>
|
|
<SearchTrigger>Search</SearchTrigger>
|
|
<SearchDialog />
|
|
</SearchProvider>
|
|
```
|
|
|
|
`SearchDialog` registers `Mod+K` by default. Pass `hotkey={false}` when the application manages shortcuts centrally.
|