simple-react-app-kit/packages/blocks/docs/en-US/guide/installation.mdx

---
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/notifications` does not pull chat into the same module graph. Media workflows are provided separately by `@workspace/media`.

## 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.