Maofeng
41 lines
1.1 KiB
Plaintext
41 lines
1.1 KiB
Plaintext
---
|
|
title: Installation
|
|
description: Add the package, its styles, and the providers required by the tutorial.
|
|
order: 10
|
|
toc:
|
|
- id: add-the-package
|
|
title: Add the package
|
|
- id: import-styles
|
|
title: Import styles
|
|
- id: application-providers
|
|
title: Application providers
|
|
---
|
|
|
|
## Add the package {#add-the-package}
|
|
|
|
Add the workspace dependency to the consuming application:
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"@workspace/blocks": "workspace:*"
|
|
}
|
|
}
|
|
```
|
|
|
|
Blocks use `@workspace/ui`, React Query, and the workspace internationalization runtime. The workspace package manager resolves those dependencies for local applications.
|
|
|
|
## Import styles {#import-styles}
|
|
|
|
Import the block stylesheet once from the application entry:
|
|
|
|
```ts
|
|
import "@workspace/blocks/globals.css"
|
|
```
|
|
|
|
Keep feature imports on their explicit subpaths. For example, importing `@workspace/blocks/media` does not pull chat into the same module graph.
|
|
|
|
## Application providers {#application-providers}
|
|
|
|
The full shell expects React Query and internationalization to be available above it. Add those providers before the route tree, then continue to the application-shell chapter.
|