kanpeki.json

The kanpeki.json file holds configuration for your project.

We use it to understand how your project is set up and how to generate components customized for your project.

You can create a kanpeki.json file in your project by running the following command:

npx kanpeki-ui@latest init

See the CLI section for more information.

$schema

You can see the JSON Schema for kanpeki.json here.

{
  "$schema": "https://kanpeki.vercel.app/schema.json"
}

rsc

Whether or not to enable support for React Server Components.

The CLI automatically adds a use client directive to client components when set to true.

{
  "rsc": true | false
}

tailwind

Configuration to help the CLI understand how Tailwind CSS is set up in your project.

See the installation section for how to set up Tailwind CSS.

tailwind.config

Path to where your tailwind.config.ts file is located.

{
  "tailwind": {
    "config": "tailwind.config.ts"
  }
}

tailwind.css

Path to the CSS file that imports Tailwind CSS into your project.

{
  "tailwind": {
    "css": "src/styles/globals.css"
  }
}

tailwind.prefix

The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.

{
  "tailwind": {
    "prefix": "tw-"
  }
}

aliases

The CLI uses these values and the paths config from your tsconfig.json file to place generated components in the correct location.

Path aliases have to be set up in your tsconfig.json file.

aliases.components

Import alias for your components.

{
  "aliases": {
    "components": "~/components"
  }
}

aliases.utils

Import alias for your utility functions.

{
  "aliases": {
    "utils": "~/utils"
  }
}

aliases.ui

Import alias for ui components.

The CLI will use the aliases.ui value to determine where to place your ui components. Use this config if you want to customize the installation directory for your ui components.

{
  "aliases": {
    "ui": "~/components/ui"
  }
}