components.json

The components.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 components.json file in your project by running the following command:

npx shadxn@latest init

See the CLI section for more information.

$schema

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

{
  "$schema": "https://ui.shadcn.com/schema.json"
}

style

The style for your components. This cannot be changed after initialization.

{
  "style": "default" | "new-york"
}

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.js file is located.

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

tailwind.css

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

{
  "tailwind": {
    "css": "styles/global.css"
  }
}

tailwind.baseColor

This is used to generate the default color palette for your components. This cannot be changed after initialization.

{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

tailwind.cssVariables

You can choose between using CSS variables or Tailwind CSS utility classes for theming.

To use utility classes for theming set tailwind.cssVariables to false. For CSS variables, set tailwind.cssVariables to true.

{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

For more information, see the theming docs.

This cannot be changed after initialization. To switch between CSS variables and utility classes, you'll have to delete and re-install your components.

tailwind.prefix

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

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

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`
}

tsx

Choose between TypeScript or JavaScript components.

Setting this option to false allows components to be added as JavaScript with the .jsx file extension.

{
  "tsx": `true` | `false`
}

aliases

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

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

aliases.utils

Import alias for your utility functions.

{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

aliases.components

Import alias for your components.

{
  "aliases
 
": {
    "components": "@/components"
  }
}

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": "@/app/ui"
  }
}

registries

The registries section within your components.json allows you to define custom component registries for your project. This configuration is crucial for specifying the sources from which your project can retrieve components. It supports setting up multiple registries, including private registries or those hosted by the community, enhancing flexibility and control over component management.

Each registry entry requires two properties:

• name: The registry identifier. This is a unique name you assign to the registry, which you can refer to when adding components to your project using the CLI.

• baseUrl: The URL from where the components will be served. This should point to the root URL of the registry's server, where the components and their metadata are hosted.

By configuring multiple registries, you can seamlessly integrate components from various sources, streamline your development workflow, and foster a modular and scalable project structure.

Example configuration:

{
  "registries": [
    {
      "name": "shadcn",
      "baseUrl": "https://ui.shadcn.com"
    },
    {
      "name": "shadxn",
      "baseUrl": "https://ui.shadxn.com"
    },
    {
      "name": "localhost",
      "baseUrl": "http://localhost:3001"
    }
  ]
}

In this example, three registries are defined:

• shadcn points to the original Shadcn component library.
• shadxn points to the Shadxn-specific components.
• localhost is configured for local development, allowing developers to test and integrate locally developed components before deployment.

This flexible setup empowers developers to leverage a wide range of components, tailor their projects to specific needs, and collaborate more effectively with the community.