Design System Elements

Angular Version: 18.2.13 Design system Version: "0.0.15"

This project exports the complete stylesheet from the Cito Design System and packages all Angular components as custom elements — hence the name Design System Elements.

It is published publicly as an npm package:
@citolab/design-system-elements

Installation

Install the package using npm:

npm install @citolab/design-system-elements

Then include it in your project:

import '@citolab/design-system-elements';
import '@citolab/design-system-elements/styles.css';

You can now use the custom elements in your HTML:

<cito-badge-element>badge</cito-badge-element>
<cito-button-element>button</cito-button-element>

Dependencies

This project wraps components from the private package @cito/design-system.

If you're unable to install @cito/design-system, you may not have access to the private npm feed.
Follow this guide to connect to the feed:
👉 Connect to CitoNpm feed

Purpose

This is a standard Angular application that exports:

• CSS styles
• JavaScript files
• Fonts and assets

The goal is to enable the use of the Cito Design System in non-Angular projects.

If you're building an Angular application, use the native design system package:
@cito/design-system

Development

To start a local development server:

ng serve

Navigate to:
http://localhost:4200/
The application will automatically reload whenever source files are changed.

Building

To build the project, run:

ng build:elements

This will compile the project into the dist/ directory. The output files:

• main.js
• polyfills.js
• runtime.js

will be bundled together into a single file:
index.js