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

typescript

This project and the components are written in TypeScript. It's highly recommended to use Typescript version of the components for your project as well.

You can set typescript to false to opt-out of TypeScript.

{
  "typescript": false
}

To configure import aliases in Javascript, you can add the following to your jsconfig.json file:

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

style

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

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

Create project

Deploy your new project in one-click.

Name

Framework

tailwind

Skip this section if you're not using Tailwind style system.

This field helps CLI understand how Tailwind CSS is set up in your project. See installation page to learn how to set up Tailwind CSS.

tailwind.config

Path to your tailwind.config.js file.

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

tailwind.css

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

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

tailwind.baseColor

This is used to generate the default color palette for your components.

{
  "tailwind": {
    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
  }
}

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

tailwind.cssVariables

You can choose between using CSS variables or Tailwind CSS utility classes for theming.

{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

"cssVariables": true - can use both variables and utility classes. Variables are generated during initialization:

<Button class="bg-primary text-primary-foreground">Text</Button>

<Button class="bg-gray-900 text-gray-50">Text</Button>

"cssVariables": false - you can only use utility classes. The variables will not be generated:

<Button class="bg-gray-900 text-gray-50">Text</Button>

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

aliases

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. 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 or jsconfig.json file.

aliases.utils

Import alias for your utility functions.

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

aliases.components

Path to where CLI will add components.

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