# Installation

Package: @commenda/pathfinder@0.1.0
Page: /docs/getting-started/installation

## Workspace installation [#workspace-installation]

The package is currently available in the Commenda workspace and has not been
published to a registry. Add `@commenda/pathfinder` with the `workspace:*` version
to a consumer's dependencies, then run `pnpm install`.

For another repository, build and pack it first:

```sh
pnpm --dir packages/pathfinder pack --pack-destination /tmp
```

Install the resulting `.tgz` file with that repository's package manager. Once
registry publishing is configured, a normal versioned dependency can replace it.

## Styles [#styles]

Import the stylesheet once, after your app's base styles. For Next.js Pages Router,
use `pages/_app.tsx`; for App Router, use `app/layout.tsx`.

```tsx
import '@commenda/pathfinder/styles.css';
```

Consumers do not need Tailwind, Pathfinder source scanning, a PostCSS plugin,
or a `transpilePackages` entry. Next.js still bundles the finished CSS.

## Components [#components]

```tsx
import { Button } from '@commenda/pathfinder';

export const SaveButton = () => <Button>Save changes</Button>;
```

The direct `@commenda/pathfinder/button` import is also supported. Private source
and output paths are not public APIs.

## React and Next.js [#react-and-nextjs]

React and React DOM are peer dependencies. Supported versions are React 18.3.1
and React 19. Interactive components preserve their client boundary. In App Router,
place event handlers and state in a component marked `'use client'`.

Use the same React version for React and React DOM. Components should not depend
on application auth providers, a router, or Commenda APIs.