Skip to main contentCarbon Design System

Frameworks

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

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.