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.
Note: The components.json file is optional
It is only required if you're using the CLI to add components to your project. If you're using the copy and paste method, you don't need this file.
You can create a components.json file in your project by running the following command:
See the CLI section for more information.
Style
The style for your components. Currently, Zard/ui only supports the "css" style.
Package Manager
The package manager to use for installing dependencies. This configuration helps the CLI use the correct package runner commands for your project.
Supported values:npm, pnpm, yarn, or bun
Tailwind
Configuration to help the CLI understand how Tailwind CSS is set up in your project.
Important: Zard/ui only supports Tailwind CSS v4 and does not support Tailwind CSS v3 or SCSS.
tailwind.css
Path to the CSS file that imports Tailwind CSS into your project.
tailwind.baseColor
This is used to generate the default color palette for your components. This cannot be changed after initialization. (but if u want u can change manually, all the themes exist into the theming page)
Currently supported base colors:
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.
This cannot be changed after initialization. To switch between CSS variables and utility classes, you'll have to delete and re-install your components.
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.utils
Import alias for your utility functions.
Current Zard/ui components.json
Here's the current components.json structure that Zard/ui supports: