Skip to main contentCarbon Design System

Frameworks

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

This library uses Custom Elements v1 and Shadow DOM v1 specs.

Info on Carbon Web Components v1 can be found here.

Resources

Getting started

Using CDN

How to install

All components are 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
):

{/* By `latest` tag */}
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
{/* By specific version */}
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.min.js"></script>

These are the list of available components via CDN:

  • accordion.min.js
  • breadcrumb.min.js
  • button.min.js
  • checkbox.min.js
  • code-snippet.min.js
  • combo-box.min.js
  • content-switcher.min.js
  • copy.min.js
  • copy-button.min.js
  • data-table.min.js
  • date-picker.min.js
  • dropdown.min.js
  • file-uploader.min.js
  • floating-menu.min.js
  • form.min.js
  • inline-loading.min.js
  • layer.min.js
  • link.min.js
  • list.min.js
  • loading.min.js
  • modal.min.js
  • multi-select.min.js
  • notification.min.js
  • number-input.min.js
  • overflow-menu.min.js
  • pagination.min.js
  • progress-indicator.min.js
  • radio-button.min.js
  • search.min.js
  • select.min.js
  • skeleton-placeholder.min.js
  • skeleton-text.min.js
  • skip-to-content.min.js
  • slider.min.js
  • structured-list.min.js
  • tabs.min.js
  • tag.min.js
  • text-input.min.js
  • textarea.min.js
  • tile.min.js
  • toggle.min.js
  • toggle-tip.min.js
  • tooltip.min.js
  • ui-shell.min.js

To use the right-to-left (RTL) version of the artifacts, change the file extention from

.min.js
to
.rtl.min.js
. For example:

{/* By `latest` tag (RTL) */}
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.rtl.min.js"></script>
{/* By specific version (RTL) */}
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.rtl.min.js"></script>

Basic usage

The CDN artifacts define the custom elements for the browser, so they can be directly used once the script tag has been added to the page. For example:

<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
<style type="text/css">
// Suppresses the custom element until it has been defined
cds-dropdown:not(:defined),

Our example at Stackblitz shows usage with only CDN artifacts:

Edit @carbon/web-components

Using ES imports

How to install

To install

@carbon/web-components
in your project, you will need to run the following command using npm:

npm install -S @carbon/web-components

If you prefer Yarn, use the following command instead:

yarn add @carbon/web-components

Basic usage

Our example at Stackblitz shows the most basic usage:

Edit @carbon/web-components

The first thing you need to do is set up a module bundler to resolve ECMAScript

import
s. The above example uses ViteJS but you can use other bundlers like Webpack too.

Once you set up a module bundler, you can start importing our component modules, for example:

import '@carbon/web-components/es/components/dropdown/index.js';

Once you’ve imported the component modules, you can use our components in the same manner as native HTML tags, for example:

<cds-dropdown value="bar">
<cds-dropdown-item value="foo">Foo</cds-dropdown-item>
<cds-dropdown-item value="bar">Bar</cds-dropdown-item>
<cds-dropdown-item value="baz">Baz</cds-dropdown-item>
</cds-dropdown>

List of available components

View available web components here. Usage information is available in the notes provided with each story.

JavaScript framework integration

In addition to the available web component versions of Carbon components, this library also supports usage with JavaScript frameworks like Angular, React, and Vue if the desire is to use instead of the pure framework versions of Carbon components. Specifically for React, this library comes with a wrapper implementation around the Carbon Web Components for more seamless integration with your React application.

This is achievable since web components is the modern browser standard, and works well with other front-end frameworks that exist in the application. In turn, this also comes with the benefits of encapsulation within the Shadow DOM.

Note: The approaches above detail the usage of Carbon Web Components within popular JavaScript frameworks. The APIs are based on how the web components are used, and differ from its pure framework counterparts (Carbon React, Carbon Angular, Carbon Vue).

Troubleshooting

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