Skip to main content

Project configuration

To start using Croma Design System (CDS) in your project, you first need to install the required packages from npm. If you haven't done so yet, please refer to the Installing CDS section for detailed instructions.

Integrate the CDS​

Once installed, you can integrate the design system into your project in two ways, depending on your needs:

Bundle​

For projects requiring the entire design system, you can import the bundled file. This single import includes all core styles, components, and utilities, making setup quick and easy.

Importing bundle
@use '@circutor/ui/scss/common/cds-bundle';

This approach is ideal for comprehensive applications where most components and utilities will be utilized.

Core​

For lightweight projects, you can selectively import only the core system and the specific components you need. This method minimizes unused styles and reduces the bundle size.

1. Start by importing the core
@use '@circutor/ui/scss/common/cds-core';
2. Then, import individual components as required:
@use '@circutor/ui/06-atoms/cds-button';
@use '@circutor/ui/06-atoms/cds-badge';
...

Setup your brand​

You can set up a brand effortlessly by using a bundle that applies all the customized styles for that brand. This approach ensures consistency and simplifies branding across your project. Additionally, for further flexibility, individual variables can be customized as needed, giving you the ability to tailor specific elements while maintaining alignment with the overall brand identity.

Setting up Circutor brand using the bundle
@use '@circutor/ui/scss/common/cds-circutor-bundle';
Setting up Circontrol brand using the bundle
@use '@circutor/ui/scss/common/cds-circontrol-bundle';