Carbon Design System

<a href="https://www.carbondesignsystem.com">Website</a> ·
<a href="https://carbondesignsystem.com/designing/get-started/">Design</a> ·
<a href="https://carbondesignsystem.com/developing/get-started/">Develop</a> ·
<a href="https://carbondesignsystem.com/contributing/get-started/overview/">Contribute</a> ·
<a href="https://carbondesignsystem.com/migrating/guide/overview/">Migrate</a>







<a href="https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml">
  <img alt="CI" src="https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml/badge.svg" />
</a>
<a href="https://bestpractices.coreinfrastructure.org/projects/7034">
  <img alt="OpenSSF Best Practices" src="https://bestpractices.coreinfrastructure.org/projects/7034/badge" />
</a>
<a href="https://github.com/carbon-design-system/carbon/raw/v11.111.0/LICENSE">
  <img alt="GitHub License" src="https://img.shields.io/github/license/carbon-design-system/carbon">
</a>
<a href="https://discord.gg/J7JEUEkTRX">
  <img alt="Discord" src="https://img.shields.io/discord/689212587170201628?label=chat&logo=discord&logoColor=white&color=5865F2" />
</a>

Carbon is IBM's open-source design system for products and experiences. This monorepo includes the React and web components libraries, Sass styles, design tokens, icons, pictograms, and tooling used to build with Carbon.

Packages

Package	Version	Downloads	Description	Links
@carbon/react			React components and styles.	Docs · Storybook · Source
@carbon/web-components			Standards-based web components.	Docs · Storybook · Source
@carbon/colors			Color scales and color token utilities.	Source
@carbon/elements			IBM Design Language foundations, including tokens and assets.	Source
@carbon/grid			Layouts built on Carbon's grid.	Source
@carbon/icons			Icon assets and framework packages.	React · Vue · Source
@carbon/layout			Layout units and spacing scale tokens.	Source
@carbon/motion			Productive and expressive motion curves.	Source
@carbon/pictograms			Pictogram assets.	React · Source
@carbon/styles			Sass styles for Carbon components.	Source
@carbon/themes			Theme tokens for Carbon color systems.	Source
@carbon/type			Type tokens designed to pair with IBM Plex.	Source

Community-maintained packages are also available for Angular, Svelte, and Vue.

Contributing

Contributions are welcome. See CONTRIBUTING.md for contribution guidelines and repository expectations.

Community

The Carbon community can be found on GitHub Discussions, where you can ask questions, share ideas, and connect with other contributors.

To chat with other community members, join the Carbon Discord server.

Note that our Code of Conduct applies to all Carbon community channels.

License

Licensed under the Apache 2.0 License.

Contributors