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.

Resources

Getting started

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

npm install -S carbon-web-components carbon-components lit-html lit-element

If you prefer Yarn, use the following command instead:

yarn add carbon-web-components carbon-components lit-html lit-element

Basic usage

Our example at CodeSandbox 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 imports. The above example uses Webpack but you can use other bundlers like Rollup too.

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

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

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

<bx-dropdown trigger-content="Select an item">
<bx-dropdown-item value="all">Option 1</bx-dropdown-item>
<bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
<bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
<bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
<bx-dropdown-item value="router">Option 5</bx-dropdown-item>
</bx-dropdown>

If you just want to try our components for demonstrations and so on, you can use CDNs that support module mapping (for example, JSPM). With CDNs, you can import just our modules in <script type="module">:

<!DOCTYPE html>
<html>
<head>
<script type="module">
import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown.js';
import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown-item.js';
</script>
<style type="text/css">
#app {

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:

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.