# Croma Design System

Visit [https://cds.circutor.com/](https://cds.circutor.com/) to check the latest documentation of **Croma Design System**.

## Installing CDS

To start using the **Croma Design System** (CDS) in your project, you need to install the CDS package via npm.

### Install the CDS Package

Run the following command to install the CDS package:

```bash
npm install @circutor/ui  
```

### Current Version

[![NPM](https://img.shields.io/npm/v/@circutor/ui.svg)](https://www.npmjs.com/package/@circutor/ui)

To check for updates, run:

```bash
npm show @circutor/ui version  
```

### Updating CDS

We recommend leaving the `^` symbol in the package version within your `package.json` file. This allows for automatic updates of minor and patch versions, ensuring you get the latest improvements and bug fixes.

```json
{
  "dependencies": {
    "@circutor/ui": "^5.0.0"
  }
}
```

In this example, the `^` ensures that your project will automatically update to the latest minor or patch versions of CDS (e.g., `5.0.3`, `5.1.0`), but it won't automatically update to a new major version like `6.0.0`. For major updates, you can manually update the version number after reviewing any breaking changes.

To update to the **latest version**, use the following command:

```bash
npm update @circutor/ui  
```

### Setup the project

You can set up a brand effortlessly by assigning a single variable that applies all the customized styles for that brand. This approach ensures consistency and simplifies branding across your project.

```css
@use '@circutor/ui/scss/common/cds-bundle' with (
  $config-brand: 'circutor'
);
```

### Advices

- **Version Locking**: For projects in production, consider locking your CDS version in package.json to ensure stability.
- **Changelog**: Review the changelog before updating to understand new features, fixes, or breaking changes.
- **Test Before Update**: If updating CDS, test in a development environment to confirm compatibility with your project.

---


