Skip to content

carbon-design-system/carbon

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 14,276 Commits
.github		.github
.husky		.husky
.yarn		.yarn
actions		actions
config		config
docs		docs
e2e		e2e
examples		examples
packages		packages
tasks		tasks
.all-contributorsrc		.all-contributorsrc
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.stylelintignore		.stylelintignore
.whitesource		.whitesource
.yarnrc.yml		.yarnrc.yml
AGENTS.md		AGENTS.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
achecker.js		achecker.js
catalog-info.yaml		catalog-info.yaml
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
jest.e2e.config.js		jest.e2e.config.js
lerna.json		lerna.json
netlify.toml		netlify.toml
nx.json		nx.json
package.json		package.json
playwright.config.js		playwright.config.js
prettier.config.js		prettier.config.js
yarn.lock		yarn.lock

Repository files navigation

Carbon Design System

Carbon Design System

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.

Carbon is released under the Apache-2.0 license CI workflow status Maintained with Lerna PRs welcome Chat with us on Discord

Getting started

If you're just getting started, check out @carbon/react or @carbon/web-components.

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

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/web-components`	Web Components
`@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

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.

📚 Documentation

See our documentation site here for full how-to docs and guidelines
Contributing: Guidelines for making contributions to this repo.
🏃‍♀️ Migration Guides

🙌 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

_{Alexander Lyon}
💻
_{Rosie Z}
💻
_{Nishith P}
📖
_{Eric Charpentier}
💻
_{Luiza Mendes}
💻 🚧
_{Akmal Hakimi Mohd Zamri}
💻
_sanjitbauli
📖

_{Laszlo Moczo}
💻
_LMapes
🖋 📖
_conradennis
🎨
_{Eric Liu}
💻 📖
_{Richard Všianský}
💻
_{Lee Chase}
💻 📖
_Anton
💻

_{Panpan Lin}
📖
_{Ashley Harrison}
💻
_{Jen Downs}
💻 📖 ️️️️♿️
_{Abdul Rehman}
💻
_{MIchael Dudley}
🎨
_{David Bradshaw}
💻
_{Simon Finney}
💻 ️️️️♿️

_{Attila Bartha}
💻
_배하람
💻
_{Yohanna Gadelrab}
📖
_{Akira Sudoh}
💻 📖 ️️️️♿️ 🚇
_{Oyinkan Oyetunmibi}
📖
_pbenson322
📖
_{Abbey Hart}
💻 📖 ️️️️♿️

_Lucas
💻
_{Dylan Klohr}
📖
_{Gilli Sigurdsson}
🎨
_kennylam
💻 ️️️️♿️
_Sébastien
💻
_{Dusan Milko}
💻
_{Taras Polovyi}
💻

_{Chris Connors}
🎨 📖
_{David Conner}
💻 ️️️️♿️
_{Harish Mohanani}
💻
_{Frivalszky-Mayer Péter}
💻 ️️️️♿️
_s100
💻
_{Taranveer Virk}
💻
_{Niall Cargill}
📖

_{Matt Chapman}
💻
_{Boston Cartwright}
💻
_DavidSCChen
💻
_molyholy
💻
_{Scott Dickerson}
💻
_{Evgeniy Podgaetskiy}
💻
_{CassidyJensen}
💻 ️️️️♿️

_{Zsolt Lattmann}
💻
_{Conrad Schmidt}
💻
_{Ignacio Becerra}
💻
_{Swapnil Patil}
📖
_{Fei Z}
💻
_{Ignas Ausiejus}
📖
_{Ryan O. Mackey}
💻

_{Dávid Halász}
💻
_{Bill Guigue}
💻
_{szymonbrandys}
💻
_{Adam Alston}
📖
_{Krithika S Udupa}
📖
_{Eshin Griffith}
💻
_{@RianTavaresOn}
💻 🎨

_ColbyJohnIBM
💻
_Håkon
💻 📖
_{Tanner Summers}
💻
_{Zhen Wang}
💻 📖
_{Cathal Kenneally}
💻
_{Joel Humberto Gómez Paredes}
💻
_{James Nash}
💻 📖

_{Jakub Faliszewski}
💻
_{Nick Gong}
💻
_{Hannele Valtanen}
💻
_Llam4u
💻 🐛
_{G. Torres}
💻
_Fiona
💻
_kindoflew
💻

_{Mario Gueyraud}
💻
_{Dongjoon Lee}
💻
_{ShankarV-CodeJunkie}
💻
_{dario platania}
💻
_{Mateusz Krzyżanowski}
💻
_jpsorensen
💻
_{jae kaplan}
🚇

_{Sierra Wetmore}
💻
_kcprevatt
💻
_{Marcin Lewandowski}
💻
_remolueoend
💻
_{Jesse Hull}
💻 ️️️️♿️
_{Ashvin Warrier}
💻
_GalvinGao
💻

_{Bianca Sparxs}
💻
_{Mahmoud Abdulazim}
💻
_{Dave Steinberg}
💻
_{Seong-Hyun Ryoo}
💻
_{Pratik Karad}
💻 ️️️️♿️
_Gerzon
💻
_{Guilherme Datilio Ribeiro}
💻 📖 ️️️️♿️ 👀

_{Josef Kubíček}
💻
_{Sunny Johal}
💻
_{Steven Black}
💻 ️️️️♿️
_{Mark Judy}
💻
_{Anton Tsymuk}
💻
_{Mohammed Aslam P. A.}
💻 📖
_{Tony ZL}
💻

_{Petr Kadlec}
💻
_{David Ragsdale}
💻
_{Hao Cheng}
💻
_cordesmj
💻
_{Aziz Chebbi}
💻
_{Michał Konopski}
💻
_{Omkar Ajagunde}
💻 📖

_{Aman Lajpal}
💻 📖
_{Niraj Sah}
💻
_{David Padilla}
💻
_{Allison Ishida}
💻
_{Alex Lewitt}
💻
_Tresau
💻
_{Daniel Castillo}
💻

_HaRuki
💻 📖
_{Matej Ocovsky}
💻
_{SamChinellato}
💻
_{stevenpatrick009}
💻
_HunterXalc
💻
_{Onur Özkardeş}
💻
_{Matias Borghi}
💻

_{Alexandr Ovchinnikov}
💻
_{J Thomas}
💻
_{Garrett Dawson}
💻 📖
_{Daniel Adebonojo}
📖
_{Anjana M R}
💻
_{Joseph Schultz}
💻
_anjaly0606
💻

_jesnajoseijk
💻
_{Jawahar S}
💻
_{Holly Springsteen}
💻
_{Nikhil Tomar}
💻
_{Anina Antony}
💻
_{Ahmed Semih Erkan}
💻
_{Yael Chavoya}
💻 📖

_{Kilian Collender}
💻
_{nandininarayanofficial}
💻
_{Andrea DG}
💻
_Luis
💻
_{Luke Harrison}
💻
_{Ahmed Alsinan}
💻
_{Nevan Tan}
💻

_{Ali Al Dobyan}
💻
_{Adam Shea}
💻
_{Md Nabeel Ayubee}
💻
_{Patan Amrulla Khan}
💻 📖
_{Noah S.}
💻 📖
_{Divya G}
💻
_{Soumya Raju}
💻

_{Mohammed Mikdhad C}
💻
_{IRFAD KP}
💻
_{ziyadzulfikar}
💻
_{IRFAD KP}
💻
_Mariat
💻
_{Thamjith Thaha}
💻
_{Zoë Gathercole}
💻

_{Ashna Thomas}
💻
_{Zach Tindall}
💻
_{Vsevolod Platunov}
💻
_{Heloise Lui}
💻 📖 ️️️️♿️ 👀
_{Nick Chevsky}
💻
_{Daniel Smith}
💻 ️️️️♿️ 📖
_{enricobguedes}
💻

_{Guillaume Delory}
💻
_{Kanchi Bhaskar}
💻 📖
_{Son H. Mai (Mason)}
💻
_{Warren Blood}
💻 📖 ️️️️♿️
_{Vlad Cherneny}
💻
_{Francisco Alcalá}
💻
_{Dishant Kaushik}
💻

_{SUJITH C S}
💻
_{Mariya George}
💻
_{Sojin antony}
💻
_{Gopi-Agasthia-S-005CIU744}
💻
_sanraj2000
💻
_{Nagarajan Sivaraman}
💻
_{Peter Šándor}
💻

_{Maria Thomson}
💻
_{Andres CS}
💻
_{Michele Payne}
💻
_Anvar
💻
_{Kadir Yazgan}
💻
_{Mahmoud Radwan}
💻 📖 ️️️️♿️ 👀
_{bijoy valsan}
💻

_{Jose Biescas}
💻
_anuanto966
💻
_Faisal
💻
_{Anju Shivan}
💻
_{Sean Haughey}
💻
_{Vignesh-Loganathan-IBM-1}
💻
_{Rishabh Sharma}
💻

_{Cristiano Rastelli}
💻 💡
_{olihf-dematic}
💻 ️️️️♿️
_{Vidhya Ravikumar}
💻
_{Mateus Rodrigues}
💻
_{Beatriz Parolin}
💻
_{João Victor}
💻
_{Truman Butterworth}
💻

_{Grishma Shah}
️️️️♿️
_{Pradumnya Zendphale}
💻
_{Sunil TC}
💻
_{Badira P P}
💻
_Harish
📖 💻
_{Natalija Fucadzi}
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

📝 License

Licensed under the Apache 2.0 License.

About

A design system built by IBM

www.carbondesignsystem.com

Topics

react javascript scss hacktoberfest design-system

Resources

License

Apache-2.0 license

Code of conduct

Code of conduct

Contributing

Security policy

Security policy

Custom properties

Stars

Watchers

Forks

Report repository

Releases 1,068

v11.109.0 Latest

+ 1,067 releases

Contributors

Languages