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.

This file is created automatically when you run shadcn init. You can also create it manually.

Schema

You can use the JSON schema to get IntelliSense in your editor:

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

Configuration

Here’s a complete example of a components.json file:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {}
}

Properties

$schema

string

URL to the JSON schema for IntelliSense and validation.

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

style

string

required

The style for your components. Available styles: default or new-york.

{
  "style": "new-york"
}

The style determines the design and feel of your components. The “new-york” style features a more modern, refined aesthetic.

rsc

boolean

default:"false"

Whether to use React Server Components.

{
  "rsc": true
}

When set to true, components will be optimized for React Server Components. Use "use client" directives will be added where necessary.

tsx

boolean

default:"true"

Whether to use TypeScript.

{
  "tsx": true
}

When set to false, components will be generated as .jsx files instead of .tsx.

tailwind

object

required

Configuration for Tailwind CSS.

Show tailwind properties

tailwind.config

string

Path to your tailwind.config.js file.

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

tailwind.css

string

required

Path to your global CSS file.

{
  "tailwind": {
    "css": "app/globals.css"
  }
}

tailwind.baseColor

string

required

The base color for your project. Options: neutral, gray, zinc, stone, slate.

{
  "tailwind": {
    "baseColor": "neutral"
  }
}

This determines the default gray scale used throughout your components.

tailwind.cssVariables

boolean

default:"true"

Whether to use CSS variables for theming.

{
  "tailwind": {
    "cssVariables": true
  }
}

When true, colors are defined using CSS variables, making theme customization easier.

tailwind.prefix

string

default:""

Prefix for Tailwind CSS classes.

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

Useful when integrating with existing projects that have class name conflicts.

aliases

object

required

Import aliases for your project.

{
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Show alias properties

aliases.components

string

required

Import alias for components.

aliases.utils

string

required

Import alias for utility functions.

aliases.ui

string

Import alias for UI components.

aliases.lib

string

Import alias for library files.

aliases.hooks

string

Import alias for React hooks.

These aliases must match the path mappings in your tsconfig.json or jsconfig.json.

iconLibrary

string

The icon library to use. Options: lucide or radix.

{
  "iconLibrary": "lucide"
}

lucide: Uses Lucide Icons
radix: Uses Radix Icons

If not specified, defaults to lucide for the default style and radix for the new-york style.

rtl

boolean

default:"false"

Enable right-to-left (RTL) support.

{
  "rtl": true
}

When enabled, components will be optimized for RTL languages like Arabic and Hebrew.

menuColor

The color mode for menus. Options: default or inverted.

{
  "menuColor": "inverted"
}

menuAccent

The accent style for menus. Options: subtle or bold.

{
  "menuAccent": "bold"
}

registries

object

Custom component registries.

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@v0": {
      "url": "https://api.v0.dev/registry/{name}.json",
      "headers": {
        "Authorization": "Bearer ${V0_TOKEN}"
      }
    }
  }
}

Registry names must start with @. Each registry can be:

Simple string format: URL template with {name} placeholder
Advanced object format: URL with optional authentication

Show Registry object properties

url

string

required

URL template with {name} placeholder.

params

object

Query parameters to include in requests.

headers

object

HTTP headers to include in requests. Supports environment variable interpolation using ${VAR_NAME}.

Built-in registries (@shadcn, @v0, etc.) cannot be overridden.

Examples

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Path Aliases

The CLI uses the aliases defined in components.json to generate imports. Make sure these match your tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Validation

The components.json file is validated against the schema. You can view the full schema at:

https://ui.shadcn.com/schema.json

Use the $schema property to get IntelliSense and validation in VS Code and other editors that support JSON Schema.

Get Started

Installation

Customization

Guides

Integrations

components.json

components.json

Schema

Configuration

Properties

$schema

style

rsc

tsx

tailwind

aliases

iconLibrary

rtl

menuColor

menuAccent

registries

Examples

Path Aliases

Validation

Build docs developers (and LLMs) love

Get Started

Installation

Customization

Guides

Integrations

​components.json

​Schema

​Configuration

​Properties

​$schema

​style

​rsc

​tsx

​tailwind

​aliases

​iconLibrary

​rtl

​menuColor

​menuAccent

​registries

​Examples

​Path Aliases

​Validation

Build docs developers (and LLMs) love

components.json

Schema

Configuration

Properties

$schema

style

rsc

tsx

tailwind

aliases

iconLibrary

rtl

menuColor

menuAccent

registries

Examples

Path Aliases

Validation