Installing dependencies

The client shares the same effect packages as api-client: effect, @effect/platform and @effect/schema.

The React Router v7 template already includes all the react-router packages, as well as tailwindcss, vite and react.

On the client Paddle provides another library to initialize and embed an inline checkout form: @paddle/paddle-js. This library is at the core of Paddle payments on the client:

pnpm add @paddle/paddle-js

State management is implemented using xstate:

pnpm add xstate @xstate/react

You can learn more about XState from XState: Complete Getting Started Guide.

Components are based on react-aria-components:

pnpm add react-aria-components

Other dependencies are:

  • isbot: Added as part of the React Router v7 template (server)
  • clsx + tailwind-merge: Used to compose tailwind classes
package.json
"dependencies": {
  "@app/api-client": "workspace:*",
  "@effect/platform": "^0.69.9",
  "@paddle/paddle-js": "^1.2.3",
  "@react-router/node": "7.0.0-pre.0",
  "@react-router/serve": "7.0.0-pre.0",
  "@tailwindcss/vite": "^4.0.0-alpha.25",
  "@xstate/react": "^4.1.3",
  "clsx": "^2.1.1",
  "effect": "^3.10.4",
  "isbot": "^5.1.17",
  "react": "^18.3.1",
  "react-aria-components": "^1.4.0",
  "react-dom": "^18.3.1",
  "react-router": "7.0.0-pre.0",
  "tailwind-merge": "^2.5.3",
  "xstate": "^5.18.2"
}