āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/components/components-json.md ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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.
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:
pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest init
See the CLI section for more information.
You can see the JSON Schema for components.json here.
{
"$schema": "https://ui.shadcn.com/schema.json"
}
The style for your components. This cannot be changed after initialization.
{
"style": "new-york"
}
The default style has been deprecated. Use the new-york style instead.
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.
Path to where your tailwind.config.js file is located. For Tailwind CSS v4, leave this blank.
{
"tailwind": {
"config": "tailwind.config.js" | "tailwind.config.ts"
}
}
Path to the CSS file that imports Tailwind CSS into your project.
{
"tailwind": {
"css": "styles/global.css"
}
}
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"
}
}
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.
The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.
{
"tailwind": {
"prefix": "tw-"
}
}
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`
}
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`
}
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.
Important: If you're using the src directory, make sure it is included under paths in your tsconfig.json or jsconfig.json file.
Import alias for your utility functions.
{
"aliases": {
"utils": "@/lib/utils"
}
}
Import alias for your components.
{
"aliases": {
"components": "@/components"
}
}
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"
}
}
Import alias for lib functions such as format-date or generate-id.
{
"aliases": {
"lib": "@/lib"
}
}
Import alias for hooks such as use-media-query or use-toast.
{
"aliases": {
"hooks": "@/hooks"
}
}
Configure multiple resource registries for your project. This allows you to install components, libraries, utilities, and other resources from various sources including private registries.
See the Namespaced Registries documentation for detailed information.
Configure registries with URL templates:
{
"registries": {
"@v0": "https://v0.dev/chat/b/{name}",
"@acme": "https://registry.acme.com/{name}.json",
"@internal": "https://internal.company.com/{name}.json"
}
}
The {name} placeholder is replaced with the resource name when installing.
For private registries that require authentication:
{
"registries": {
"@private": {
"url": "https://api.company.com/registry/{name}.json",
"headers": {
"Authorization": "Bearer ${REGISTRY_TOKEN}",
"X-API-Key": "${API_KEY}"
},
"params": {
"version": "latest"
}
}
}
}
Environment variables in the format ${VAR_NAME} are automatically expanded from your environment.
Once configured, install resources using the namespace syntax:
# Install from a configured registry
npx shadcn@latest add @v0/dashboard
# Install from private registry
npx shadcn@latest add @private/button
# Install multiple resources
npx shadcn@latest add @acme/header @internal/auth-utils
{
"registries": {
"@shadcn": "https://ui.shadcn.com/r/{name}.json",
"@company-ui": {
"url": "https://registry.company.com/ui/{name}.json",
"headers": {
"Authorization": "Bearer ${COMPANY_TOKEN}"
}
},
"@team": {
"url": "https://team.company.com/{name}.json",
"params": {
"team": "frontend",
"version": "${REGISTRY_VERSION}"
}
}
}
}
This configuration allows you to:
For more information about authentication, see the Authentication documentation.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā