Monorepo integration

1. Define your workspaces

The kit ships as a workspace package, so any app in the monorepo can consume it directly. A typical pnpm-workspace.yaml looks like this:

# pnpm-workspace.yaml
packages:
  - "apps/*"      # your Next.js / Vite apps
  - "packages/*"  # @countryclub/ui-react lives here

2. Add the package to an app

From inside an app (e.g. apps/web), add the kit as a workspace dependency:

pnpm --filter web add @countryclub/ui-react@workspace:*

This resolves to the local package via the workspace:* protocol, so every app always builds against the source in packages/ui-react — no publishing step while you develop.

3. Transpile the package

The package ships TypeScript source rather than pre-built JS, which keeps the design system editable across the monorepo. Each consuming app needs to transpile it.

Next.js — add it to transpilePackages:

// apps/web/next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@countryclub/ui-react"],
};

export default nextConfig;

Vite transpiles workspace packages out of the box — no extra configuration needed.

4. Point Tailwind at the source

Each app generates its own CSS, so Tailwind must scan the kit's source to emit the utility classes its components use. Add a @source directive pointing at the package — adjust the relative path to your monorepo structure:

/* apps/web/app/globals.css */
@import "tailwindcss";
@import "@countryclub/ui-react/styles.css";

/* Resolve the package's source from this app's node_modules */
@source "../node_modules/@countryclub/ui-react/src";

If your package manager hoists the dependency to the repo root, point @source at the package directly instead, e.g. @source "../../../packages/ui-react/src".

5. Share across apps

Repeat steps 2–4 in every app that uses the kit. Because they all depend on the same workspace package, a change in packages/ui-react is picked up everywhere on the next build — one source of truth for the whole monorepo:

apps/
├─ web/      → @countryclub/ui-react (workspace:*)
└─ admin/    → @countryclub/ui-react (workspace:*)
packages/
└─ ui-react/ → @countryclub/ui-react (the source of truth)