> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# components.json

> Configuration for your project.

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 and **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.
</Note>

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

```bash theme={null}
npx shadcn-svelte@latest init
```

See the [CLI section](/cli) for more information.

## \$schema

You can see the JSON Schema for `components.json` [here](https://shadcn-svelte.com/schema.json).

```json components.json theme={null}
{
  "$schema": "https://shadcn-svelte.com/schema.json"
}
```

## tailwind

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

See the [installation section](/installation/index) for how to set up Tailwind CSS.

### tailwind.css

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

```json components.json theme={null}
{
  "tailwind": {
    "css": "src/app.{p,post}css"
  }
}
```

### tailwind.baseColor

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

```json components.json theme={null}
{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}
```

## aliases

The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location.

Path aliases have to be set up in your `svelte.config.js` file.

### aliases.lib

Import alias for your library, which is typically where you store your components, utils, hooks, etc.

```json components.json theme={null}
{
  "aliases": {
    "lib": "$lib"
  }
}
```

### aliases.utils

Import alias for your utility functions.

```json components.json theme={null}
{
  "aliases": {
    "utils": "$lib/utils"
  }
}
```

### aliases.components

Import alias for your components.

```json components.json theme={null}
{
  "aliases": {
    "components": "$lib/components"
  }
}
```

### aliases.ui

Import alias for your UI components.

```json components.json theme={null}
{
  "aliases": {
    "ui": "$lib/components/ui"
  }
}
```

### aliases.hooks

Import alias for your hooks, which in Svelte 5 are reactive functions/classes whose files typically end in `.svelte.ts` or `.svelte.js`.

```json components.json theme={null}
{
  "aliases": {
    "hooks": "$lib/hooks"
  }
}
```

## Typescript

Typescript can be enabled or disabled.

```json components.json theme={null}
{
  "typescript": true | false
}
```

You can also specify a path to your own custom Typescript config file if it has a different name from `tsconfig.json` or `jsconfig.json`, or if it is located in a different directory:

```json components.json theme={null}
{
  "typescript": {
    "config": "path/to/tsconfig.custom.json"
  }
}
```

## Registry

The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry.

```json components.json theme={null}
{
  "registry": "https://shadcn-svelte.com/registry"
}
```