info icon

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

The vanilla JS library is maintained by members of the Carbon community. Vanilla JS is only supported in v10. Please visit our v10 documentation for more info. For support, open an issue on GitHub.

Resources

Carbon styles

Getting started

SCSS

As of v11, Carbon only provides styles for Vanilla JS.

A minified css bundle is not included, you’ll need to add sass compiliation to your project’s build to use v11.

If you were previously using

carbon-components

, the styles from this package are available under

@carbon/styles

. The

carbon-components

packages will stick around in v11 but will only be a re-export of

@carbon/styles

For additional information on using sass for v11. Please follow the scss migration guide

Autoprefixer

Make sure your build process uses autoprefixer to ensure vendor prefixes are automatically added to your output CSS.

Namespacing

Carbon Components are built to be included individually and not clobber global styles - all

class

attributes are prefixed by the

cds--

moniker. You can specify your own prefix by changing the SCSS variable

$prefix

Legacy

CodePen

We have individual CodePens for all of our v10 components which you can easily fork and play around with.

Edit this page on GitHub

Frameworks: LWC

Frameworks: Other frameworks