Carbon Design System

Carbon Core

Last updated Aug 18, 2026

The Carbon library provides front-end developers and engineers a collection of reusable components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

Carbon Core

Install

The @carbon/web-components package provides components and styles for the Carbon Design System. Web components are provided as ES modules or through a CDN, and can be used with other frameworks such as Angular or Ember.

Or use via CDN

All components are also available via CDN. This means that they can be added to your application without the need of any bundler configuration. Each component is available by the latest tag, or referencing a specific version (starting at version v1.16.0):

This Stackblitz example shows basic usage of web components with only CDN artifacts.

How to get started

Components

Components require the use of a modern ESM-capable bundler, such as Vite JS.

To use a component, import it directly from the package:

Once you've imported the component modules, you can use components in the same manner as native HTML tags.

Styles

The @carbon/styles package includes styles for Carbon components.

To include the styles for a component, you can either import all the styles from the project or include the styles for only a specific component:

Icons

The @carbon/icons package provides icons that you can include in your project.

You can import these icon components and use with a cds-icon component.

Resources

Carbon GitHub
GitHub icon
Carbon Web Components
GitHub icon
Carbon Web Components Storybook
Storybook icon
Web Components Stackblitz
Stackblitz icon
Carbon Web Components tutorial
Web Components icon

Troubleshooting

If you experience any issues while getting set up, please head over to the GitHub repo for more guidelines and support. Please create an issue if your issue does not already exist.