The sigma-ui.config.json config file is created during initialization. It holds SIGMA-UI configuration for your project.

Note: The config 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.

You can create a sigma-ui.config.json file in your project by running the following command:

npx sigma-ui init

See the CLI section for more information.

$schema

You can see the JSON Schema for sigma-ui.config.json here.

{
  "$schema": "https://sigma-ui.dev/schema.json"
}

Config options

styleSystem

This field determines the style system for the components (CSS or Tailwind).

{
  "styleSystem": "tailwind" | "css"
}

If you want to change this after initialization, you'll have to re-install the components.

Try changing the style system and see how it affects the component's code:

Preview:

cssPath

Stylesheet that holds the theme variables. For Tailwind this file imports tailwindcss and tw-animate-css.

{
  "cssPath": "src/assets/index.css"
}

baseColor

Theme base color used to generate the palette.

{
  "baseColor": "grayscale"
}

Changing baseColor after initialization does not rewrite components that are already in the project. Run init again and re-add the components to pick up a new palette.

tailwind

Skip this section if you are not using the Tailwind style system.

tailwind.config

Optional path to a legacy tailwind.config.js. Leave it empty for CSS-first Tailwind v4. When it is set, the stylesheet references that file with @config.

{
  "tailwind": {
    "config": ""
  }
}

If you want to change this after initialization, you'll have to re-install the 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. It will fallback to tsconfig.app.json if no paths were found in tsconfig.json

Important: If you're using the src directory, make sure it is included under paths in your tsconfig.json file.

aliases.utils

Import alias for your utility functions.

{
  "aliases": {
    "utils": "@ui/utils"
  }
}

aliases.components

Path to where CLI will add components.

{
  "aliases": {
    "components": "@/components"
  }
}