Carbon Components Angular

Theme by Carbon design system

|

Updated: 20 May 2025

|

550 Stars

An Angular implementation of the Carbon Design System for IBM.

Categories

Overview

The document provides instructions for getting started with the carbon-components-angular project. It includes information on the installation process and compatibility with different Angular versions.

Features

• Offline usage: The document explains how to set the $font-path in the src/styles.scss file to copy fonts to the dist folder for offline usage.
• Assets folder: If desired, users can copy fonts from the node_modules/carbon-components/src/globals/fonts directory to the app’s src/assets/fonts folder for organizing fonts separately from the dist folder.
• Compatibility matrix: The document includes a matrix that lists the supported versions of Angular and Carbon Components Angular, indicating community support and active support for each version.

Installation

To get started with the carbon-components-angular project, follow these steps:

1. Start with a new @angular/cli project.
2. Include carbon-components in the src/styles.scss file.
   • For offline usage, set $font-path: '~carbon-components/src/globals/fonts'; at the top of src/styles.scss. This will copy the fonts to the dist folder during the build.
   • To keep the fonts in the assets folder instead, copy them from node_modules/carbon-components/src/globals/fonts to the app’s src/assets/fonts folder. Then, add $font-path: '/assets/fonts/'; at the top of src/styles.scss.
3. Run npm start to start building the application.

Summary

The document provides instructions for installing and getting started with the carbon-components-angular project. It explains the process of including carbon-components in the project and provides options for offline usage and organizing fonts. Additionally, it includes a compatibility matrix indicating the supported versions of Angular and Carbon Components Angular.