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:

pnpm dlx shadcn-svelte@latest init

npx shadcn-svelte@latest init

bun x shadcn-svelte@latest init

npx shadcn-svelte@latest init

See the CLI section for more information.

$schema

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

{
  "$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 for how to set up Tailwind CSS.

tailwind.css

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

{
  "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.

{
  "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.

{
  "aliases": {
    "lib": "$lib"
  }
}

aliases.utils

Import alias for your utility functions.

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

aliases.components

Import alias for your components.

{
  "aliases": {
    "components": "$lib/components"
  }
}

aliases.ui

Import alias for your UI components.

{
  "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.

{
  "aliases": {
    "hooks": "$lib/hooks"
  }
}

Typescript

Typescript can be enabled or disabled.

{
  "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:

{
  "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.

{
  "registry": "https://shadcn-svelte.com/registry"
}