> 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.
## Getting started
If you're just getting started, check out [`@carbon/react`](./packages/react) or
[`@carbon/web-components`](./packages/web-components).
We also have community-contributed components for the following technologies:
- [Angular](https://github.com/IBM/carbon-components-angular)
- [Svelte](https://github.com/IBM/carbon-components-svelte)
- [Vue](https://github.com/carbon-design-system/carbon-components-vue)
If you're trying to find something specific, here's a full list of packages that
we support!
| Package name | Description |
| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`@carbon/react`](./packages/react) | React components and styles |
| [`@carbon/web-components`](./packages/web-components) | Web Components |
| [`@carbon/styles`](./packages/styles) | Sass styles for components |
| [`@carbon/elements`](./packages/elements) | IBM Design Language elements like colors, type, iconography, and more |
| [`@carbon/colors`](./packages/colors) | Work with IBM Design Language colors |
| [`@carbon/grid`](./packages/grid) | Build layouts using the new 16 column grid system |
| [`@carbon/icons`](./packages/icons) | Iconography assets. We also offer support in: [React](./packages/icons-react), [Angular](https://github.com/carbon-design-system/carbon-icons-angular), [Vue](./packages/icons-vue), and [Svelte](https://github.com/IBM/carbon-icons-svelte) |
| [`@carbon/pictograms`](./packages/pictograms) | Pictogram assets. We also offer support in: [React](./packages/pictograms-react) and [Svelte](https://github.com/IBM/carbon-pictograms-svelte) |
| [`@carbon/layout`](./packages/layout) | Layout-based units and spacing scale |
| [`@carbon/motion`](./packages/motion) | Productive and expressive motion curves |
| [`@carbon/themes`](./packages/themes) | Color tokens available in the Carbon Design System, like `$interactive-01` |
| [`@carbon/type`](./packages/type) | New type tokens used alongside IBM Plex |
> [!NOTE]
>
> The code for https://carbondesignsystem.com/ is in
> https://github.com/carbon-design-system/carbon-website. Any issues or pull
> requests related to the website should be made there.
## :books: Documentation
- See our documentation site
[here](https://www.carbondesignsystem.com/developing/frameworks/react/) for
full how-to docs and guidelines
- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
to this repo.
- πββοΈ Migration Guides
- [v10 to v11](./docs/migration/v11.md)
- [v9 to v10 (vanilla)](./packages/carbon-components/docs/migration/migrate-to-10.x.md)
- [v9 to v10 (v6 to v7 React)](./packages/react/docs/migration/migrate-to-7.x.md)
## π 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](/.github/CONTRIBUTING.md) and our
[Developer Guide](./docs/developer-handbook.md)! π
## Contributors
This project follows the
[all-contributors](https://github.com/kentcdodds/all-contributors)
specification. Contributions of any kind welcome!
## π License
Licensed under the [Apache 2.0 License](/LICENSE).
