explaingit

carbon-design-system/carbon

9,120JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Carbon is IBM's open source design system, a collection of ready-to-use React and Web Components UI components, icons, colors, fonts, and grid rules that keep all IBM products looking and behaving consistently.

Mindmap

mindmap
  root((repo))
    What it does
      UI components
      Design tokens
      IBM consistency
    Packages
      React components
      Web components
      Icons and colors
    Foundations
      IBM Plex fonts
      Color palette
      Grid and spacing
    Audience
      Web developers
      IBM product teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build IBM-styled web interfaces using pre-made, accessibility-tested React or Web Components.

USE CASE 2

Apply IBM's Design Language colors, IBM Plex typography, and 16-column grid to any web project by installing individual packages.

USE CASE 3

Migrate an existing IBM product from an older Carbon version using the provided v10-to-v11 migration guides.

USE CASE 4

Add IBM icons or pictograms to an app without importing the full component library.

Tech stack

JavaScriptReactWeb ComponentsAngularSvelteVue

Getting it running

Difficulty · easy Time to first run · 30min
Apache 2.0, use freely for any purpose, including commercial products, as long as you include the license notice.

In plain English

Carbon is an open source design system created and maintained by IBM. A design system is a shared library of visual components, guidelines, and rules that a company uses so that all of its products look and behave consistently. Carbon serves this role across IBM's product portfolio, meaning the buttons, tables, forms, icons, colors, spacing, and typography that IBM apps use all come from this codebase rather than being reinvented for each product. The system is organized as a collection of installable packages rather than one monolithic library. The most common entry points are a React package for building web interfaces with the popular React framework, and a web components package for teams that are not using React. Community-maintained versions also exist for Angular, Svelte, and Vue. Each package is independent, so a team can install just the icons package or just the color tokens without taking everything. Beyond component code, Carbon includes the IBM Design Language foundations as separate packages: a defined color palette, a type scale using IBM Plex fonts, a 16-column grid system, a motion curve library for animations, icon and pictogram sets, and a spacing scale. These are the raw design decisions that the components are built on top of, published as code so developers and designers share the same source of truth. The documentation site at carbondesignsystem.com covers how to use each component, accessibility guidance, and migration guides for teams upgrading between major versions. The project has gone through several major versions, and the repository includes migration documentation for moving from v9 to v10 and v10 to v11. Carbon is open source under the Apache 2.0 license and accepts contributions. It has a large contributor base and an active Discord community. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1
Help me set up IBM Carbon Design System in a new React project and render a data table with a search bar.
Prompt 2
Show me how to use Carbon's color tokens and IBM Plex font packages to style a web page to IBM Design Language standards.
Prompt 3
I'm migrating a Carbon v10 app to v11, walk me through the breaking changes and how to update my components.
Prompt 4
Help me install only the Carbon icons package and add icons to my React app without pulling in the full component library.
Prompt 5
Show me how to build an accessible form using Carbon's Form, TextInput, and Button components in React.
Open on GitHub → Explain another repo

← carbon-design-system on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.