Carbon Design System

IBM's open-source design system: 44 documented components across five frameworks

Tier A · StrongDesign System DocsComponent LibraryBrand Guidelinescarbondesignsystem.com

(Visit carbondesignsystem.com ↗)(Docs)(Repository)

Preview image from carbondesignsystem.com

Carbon is IBM's open-source design system, Apache-2.0 licensed. The site documents 44 components with separate Usage, Style, Code and Accessibility tabs for each, on top of the IBM Design Language — the 2x Grid, IBM Plex type scale, colour tokens, motion curves and IBM Able accessibility standards. React is the reference implementation (the package exports around 135 modules including Fluid form variants and AI-specific pieces); Web Components, Angular, Vue and Svelte implementations exist alongside it. There is also an official Carbon MCP server and a Carbon for AI guidance track.

Install

npm install @carbon/react

For an agent

Reach for Carbon when accessibility is a contractual requirement or the target is a regulated enterprise product — its per-component Accessibility tab and IBM Able conformance evidence are stronger than anything MUI or antd publish. It ships an official MCP server (github.com/carbon-design-system/carbon-mcp) that answers documentation questions and generates conforming code, plus an llms.txt, so wire those up rather than scraping; the marketing site is a Gatsby build whose HTML fetches poorly and whose /components/overview/ path 404s, so navigate to /components/<name>/usage directly. Watch the Sass toolchain — @carbon/react expects Sass with `@use`, which is friction in a Tailwind or CSS-in-JS project, and the visual identity is strongly IBM.

Why it is here. The most rigorously documented open design system in public, and one of the very few that treats accessibility, motion and grid as first-class specified subjects rather than afterthoughts.

Install command, framework, licence and component list.

Facts

License: Apache 2.0
Pricing: Free, Open source
Framework: React, Web Components, Angular, Vue, Svelte
Styling: Sass / SCSS, CSS custom properties, Vanilla CSS
Distribution: npm package, GitHub repository, Figma file or kit, MCP server
Platform: Web
Content type: Code, Prose / writing, Design tokens / theme files, Figma / design source files, Icons, Fonts / typefaces
Agent readiness: MCP server, llms.txt, Structured documentation, Readable open source
Accessibility: WCAG 2.x AA, Full ARIA pattern implemented, Keyboard navigable, Focus management and visible focus, Screen reader tested, Semantic HTML, Contrast checked
Maturity: Actively maintained
GitHub stars: 9,358
Package: @carbon/react

Components it ships

44 total

Helps you build

Admin Panel User Management Settings Web App Account Web App Analytics Filtering Items Search Results Single Item Detail Bulk Actions Data Import Data Export Multi Step Form Submitting A Form Showing Input Error Empty State Notifications AI Chat Panel API Documentation

Notable for

Apache-2.0, not just MIT
official Carbon MCP server
44 components with Usage, Style, Code and Accessibility tabs
React, Web Components, Angular, Vue and Svelte builds
IBM Plex type system and 2x Grid
Carbon for AI guidance track

Provenance

Verified 2026-08-16. HTTP 200. https://carbondesignsystem.com/ (HTML), https://carbondesignsystem.com/sitemap-0.xml (44 component paths), https://carbondesignsystem.com/llms.txt (200), api.github.com/repos/carbon-design-system/carbon and its packages/react/src/components listing (135 dirs), api.github.com search for carbon-mcp; /components/overview/ returned 404

Also in Design Systems & Brand Guidelines

carbondesignsystem.comTier A