> ## Documentation Index
> Fetch the complete documentation index at: https://docs.passage.coinlist.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Package overview

> Install @coinlist-co/react - React UI, hooks, client, and server utilities for Passage.

The **`@coinlist-co/react`** package is the recommended way to integrate Passage in React and Next.js apps with a backend. It gives you OAuth with PKCE on the client, token exchange and sessions on the server, and ready-made UI for common flows.

For a linear walkthrough, start with [SDK quickstart](/sdk/quickstart).

## Requirements

* **React** 18+ and **React DOM** 18+ (peer dependencies)
* A **backend** you control to store `client_secret`, exchange authorization codes, and keep refresh tokens out of the browser

## Install

```bash theme={null}
npm install @coinlist-co/react
```

```bash theme={null}
pnpm add @coinlist-co/react
```

```bash theme={null}
yarn add @coinlist-co/react
```

[NPM](https://www.npmjs.com/package/@coinlist-co/react)

## Entry points

The package exposes three canonical entry points:

| Path                        | Use for                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@coinlist-co/react`        | React client - components (`CoinListSignInCard`, `OffersGrid`, `OfferCard`, `RequirementsChecklist`, plus wallet-connect, identity, and tax-document UI), hooks (`useCoinList`, `useOffers`, `useOfferDetails`, `useParticipations`, `useRequirements`, `useCompleteOAuth`, and swap/KYC hooks), and `CoinListClient` / `createCoinListClient` for non-React or advanced wiring |
| `@coinlist-co/react/server` | Node / SSR - `CoinListServer`, `createCoinListServer`, session helpers for Next.js route handlers and Server Components                                                                                                                                                                                                                                                         |
| `@coinlist-co/react/shared` | Isomorphic domain types - `Offer`, `OfferDetail`, `Participation`, `Requirement`, `ClientId`, `RedirectUri`, pagination helpers, error classes, and swap/KYC/PII types                                                                                                                                                                                                          |

Most apps import everything they need from `@coinlist-co/react`. Reach for `/server` only inside server-side code, and `/shared` when you want a domain type without pulling the client bundle. Sub-path imports like `@coinlist-co/react/client/components` and `/client/hooks` were removed in v0.5.0 - see the [React SDK changelog](/changelogs/react).

## Next steps

<CardGroup cols={2}>
  <Card title="SDK quickstart" icon="bolt" href="/sdk/quickstart">
    Credentials, install, and architecture in one place.
  </Card>

  <Card title="Set up OAuth authentication" icon="shield-check" href="/sdk/oauth-authentication">
    End-to-end sign-in with backend session.
  </Card>
</CardGroup>