More Premium Hugo Themes Premium React Themes

Carbon Components Angular

An Angular implementation of the Carbon Design System for IBM.

Carbon Components Angular

An Angular implementation of the Carbon Design System for IBM.

Github Stars Github Stars: 550
Last Commit Last Commit: May 20, 2025 -
First Commit Created: Apr 29, 2023 -
default image

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.