carbon

<p align="center"> <a href="https://www.carbondesignsystem.com"> <img alt="Carbon Design System" src="https://user-images.githubusercontent.com/3901764/57545698-ce5f2380-7320-11e9-8682-903df232d7b0.png" width="100%" /> </a> </p> <h1 align="center"> Carbon Design System </h1>

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

<p align="center"> <a href="https://github.com/carbon-design-system/carbon/blob/master/LICENSE"> <img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="Carbon is released under the Apache-2.0 license" /> </a> <a href="https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml"> <img src="https://github.com/carbon-design-system/carbon/actions/workflows/ci.yml/badge.svg" alt="CI workflow status" /> </a> <a href="https://lerna.js.org/"> <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna" /> </a> <a href="https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" /> </a> <a href="https://bestpractices.coreinfrastructure.org/projects/7034"> <img src="https://bestpractices.coreinfrastructure.org/projects/7034/badge"> </a> <a href="https://discord.gg/J7JEUEkTRX"> <img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord"> </a> </p>

Getting started

If you're just getting started, check out @carbon/react.

We also have community-contributed components for the following technologies:

• Angular
• Svelte
• Vue
• Web Components

If you're trying to find something specific, here's a full list of packages that we support!

Package name	Description
@carbon/react	React components and styles
@carbon/styles	Sass styles for components
@carbon/elements	IBM Design Language elements like colors, type, iconography, and more
@carbon/colors	Work with IBM Design Language colors
@carbon/grid	Build layouts using the new 16 column grid system
@carbon/icons	Iconography assets. We also offer support in: React, Angular, Vue, and Svelte
@carbon/pictograms	Pictogram assets. We also offer support in: React and Svelte
@carbon/layout	Layout-based units and spacing scale
@carbon/motion	Productive and expressive motion curves
@carbon/themes	Color tokens available in the Carbon Design System, like $interactive-01
@carbon/type	New type tokens used alongside IBM Plex

:books: Documentation

• See our documentation site here for full how-to docs and guidelines
• Contributing: Guidelines for making contributions to this repo.
• 🏃‍♀️ Migration Guides
  • v10 to v11
  • v9 to v10 (vanilla)
  • v9 to v10 (v6 to v7 React)

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide and our Developer Guide! 👀

Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://github.com/tay1orjones"><img src="https://avatars0.githubusercontent.com/u/3360588?v=4?s=100" width="100px;" alt=""/><br />_{<b>Taylor Jones</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tay1orjones" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=tay1orjones" title="Documentation">📖</a> <a href="#a11y-tay1orjones" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/tw15egan"><img src="https://avatars1.githubusercontent.com/u/11928039?v=4?s=100" width="100px;" alt=""/><br />_{<b>TJ Egan</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tw15egan" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=tw15egan" title="Documentation">📖</a> <a href="#infra-tw15egan" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Atw15egan" title="Reviewed Pull Requests">👀</a> <a href="#a11y-tw15egan" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/aledavila"><img src="https://avatars2.githubusercontent.com/u/12533409?v=4?s=100" width="100px;" alt=""/><br />_{<b>Alessandra Davila</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aledavila" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=aledavila" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aaledavila" title="Reviewed Pull Requests">👀</a> <a href="#a11y-aledavila" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://www.linkedin.com/in/andrea-cardona-b647594b/"><img src="https://avatars2.githubusercontent.com/u/32720851?v=4?s=100" width="100px;" alt=""/><br />_{<b>Andrea N. Cardona</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=andreancardona" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=andreancardona" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aandreancardona" title="Reviewed Pull Requests">👀</a> <a href="#a11y-andreancardona" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/francinelucca"><img src="https://avatars.githubusercontent.com/u/40550942?v=4?s=100" width="100px;" alt=""/><br />_{<b>Francine Lucca</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Afrancinelucca" title="Reviewed Pull Requests">👀</a> <a href="#a11y-francinelucca" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/sstrubberg"><img src="https://avatars2.githubusercontent.com/u/15822070?v=4?s=100" width="100px;" alt=""/><br />_{<b>Scott Strubberg</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sstrubberg" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=sstrubberg" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Asstrubberg" title="Reviewed Pull Requests">👀</a> <a href="#a11y-sstrubberg" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/alisonjoseph"><img src="https://avatars0.githubusercontent.com/u/2753488?v=4?s=100" width="100px;" alt=""/><br />_{<b>Alison Joseph</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=alisonjoseph" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=alisonjoseph" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aalisonjoseph" title="Reviewed Pull Requests">👀</a> <a href="#a11y-alisonjoseph" title="Accessibility">️️️️♿️</a></td> </tr> <tr> <td align="center"><a href="https://github.com/aagonzales"><img src="https://avatars3.githubusercontent.com/u/11670886?v=4?s=100" width="100px;" alt=""/><br />_{<b>Anna Gonzales</b>}</a><br /><a href="#design-aagonzales" title="Design">🎨</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aaagonzales" title="Reviewed Pull Requests">👀</a></td> <td align="center"><a href="https://github.com/laurenmrice"><img src="https://avatars3.githubusercontent.com/u/43969356?v=4?s=100" width="100px;" alt=""/><br />_{<b>Lauren Rice</b>}</a><br /><a href="#design-laurenmrice" title="Design">🎨</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Alaurenmrice" title="Reviewed Pull Requests">👀</a></td> <td align="center"><a href="https://github.com/joshblack"><img src="https://avatars1.githubusercontent.com/u/3901764?v=4?s=100" width="100px;" alt=""/><br />_{<b>Josh Black</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=joshblack" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=joshblack" title="Documentation">📖</a> <a href="#infra-joshblack" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Ajoshblack" title="Reviewed Pull Requests">👀</a> <a href="#a11y-joshblack" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://dakahn.netlify.com/"><img src="https://avatars3.githubusercontent.com/u/40970507?v=4?s=100" width="100px;" alt=""/><br />_<b>DAK</b></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dakahn" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=dakahn" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Adakahn" title="Reviewed Pull Requests">👀</a> <a href="#a11y-dakahn" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/jnm2377"><img src="https://avatars0.githubusercontent.com/u/32556167?v=4?s=100" width="100px;" alt=""/><br />_{<b>Josefina Mancilla</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jnm2377" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=jnm2377" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Ajnm2377" title="Reviewed Pull Requests">👀</a> <a href="#a11y-jnm2377" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/emyarod"><img src="https://avatars3.githubusercontent.com/u/8265238?v=4?s=100" width="100px;" alt=""/><br />_{<b>emyarod</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=emyarod" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=emyarod" title="Documentation">📖</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aemyarod" title="Reviewed Pull Requests">👀</a> <a href="#a11y-emyarod" title="Accessibility">️️️️♿️</a></td> <td align="center"><a href="https://github.com/erifsx"><img src="https://avatars3.githubusercontent.com/u/997572?v=4?s=100" width="100px;" alt=""/><br />_{<b>Eric Marcoux</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=erifsx" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://www.vincepic.one/"><img src="https://avatars1.githubusercontent.com/u/4078018?v=4?s=100" width="100px;" alt=""/><br />_{<b>Vince Picone</b>}</a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vpicone"