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:*",
  // ...
}