Integrations

components.json

An optional configuration file that records your project's import aliases and paths, so Country Club tooling can resolve where to read and write component files.

Forward-looking. Today the kit is consumed as the installed @countryclub/ui-react package, so this file is optional. It defines the convention the planned CLI and MCP tooling will read when adding component source directly into a project.

Overview

A components.json file lives at the root of your project (or the folder you run tooling from). It maps import aliases to the places component files should be generated, which is most useful for:

Monorepos with custom workspace aliases
Projects with a non-standard directory structure
Teams that want consistent component install paths

Creating components.json

Create the file in the root of your project:

{
  "aliases": {
    "components": "@/components/",
    "utils": "@/utils/",
    "hooks": "@/hooks/",
    "styles": "@/styles/"
  },
  "examples": "app"
}

Options

aliases

The aliases object defines the import prefixes used in generated component files. These must match the path mappings in your tsconfig.json.

Property	Description
`components`	Import alias for component files (e.g. `@/components/`, `@workspace/ui/components/`)
`utils`	Import alias for utility functions (e.g. `@/utils/`)
`hooks`	Import alias for React hooks (e.g. `@/hooks/`)
`styles`	Import alias for style files (e.g. `@/styles/`)

Aliases must be valid tsconfig path aliases, not relative paths like ../../components — they are resolved through your tsconfig.json to real filesystem locations.

examples

The examples property specifies where example page files should be placed. In a monorepo, point it at your web app:

{ "examples": "../../apps/web" }

Monorepo example

To use custom aliases in a monorepo, configure both your tsconfig.json and components.json with matching values:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@workspace/ui/*": ["./packages/ui/src/*"]
    }
  }
}

// components.json
{
  "aliases": {
    "components": "@workspace/ui/components/",
    "utils": "@workspace/ui/utils/",
    "hooks": "@workspace/ui/hooks/",
    "styles": "@workspace/ui/styles/"
  },
  "examples": "../../apps/web"
}

See the Monorepo integration guide for the full workspace setup.