# Installation

Install React PDF Viewer and PDF.js with your package manager and import the stylesheet once.

## Prerequisites

- React and React DOM 18 or 19.
- `pdfjs-dist` 6 (installed next to the package; it is a peer dependency so you control its version).
- A bundler that supports ES modules and CSS imports, such as Vite, Next.js or webpack 5.

Full details, including tested browsers, are on the [Requirements](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/requirements/) page.

## Installation

Install the package and PDF.js with your package manager.

**npm**

```sh
npm install @kingtech/react-pdf-viewer pdfjs-dist
```

**pnpm**

```sh
pnpm add @kingtech/react-pdf-viewer pdfjs-dist
```

**yarn**

```sh
yarn add @kingtech/react-pdf-viewer pdfjs-dist
```

The package is ESM-only, ships its TypeScript declarations, and has no runtime dependencies of its own.

## Minimal example

Import the component and, once in your app, the stylesheet:

```tsx
import { PdfViewer } from '@kingtech/react-pdf-viewer';
import '@kingtech/react-pdf-viewer/styles.css';

export function Report() {
  return <PdfViewer source="/files/report.pdf" />;
}
```

`source` can be a URL, a `File`, a `Blob` or bytes; see [Document sources](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/document-sources/).

## Verify

Start your development server and open the page. You should see the first page of the document with a toolbar below it showing the zoom level and `1 / N`. In the browser console, a one-time development notice says PDF.js assets are loading from a CDN; that is expected until you [self-host them](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/pdfjs-configuration/).

## Troubleshooting

- **The viewer has no styles.** The stylesheet is imported separately. Add `import '@kingtech/react-pdf-viewer/styles.css'` once, for example in your root layout.
- **“Failed to fetch” or a network error.** The document URL is on another origin without CORS headers. See [Authenticated requests](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/authenticated-requests/#cross-origin-documents).
- **`PDFJS_LOAD_FAILED`.** `pdfjs-dist` is missing or the worker URL is blocked by your Content Security Policy. Install `pdfjs-dist` and see [PDF.js configuration](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/pdfjs-configuration/#content-security-policy).

## Next steps

- [Usage](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/getting-started/usage/): the common props and features.
- [PDF.js configuration](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/pdfjs-configuration/): self-host the worker for production.
- Framework setup: [Vite](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/vite/), [Next.js](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/nextjs/) or [webpack](https://react-pdf-viewer-chi.vercel.app/react-pdf-viewer/integrations/webpack/).