Carbon Design Systemとは？IBMのOpen-source Design System

ページ内ナビ

概要

CarbonはIBMが公開するdesign systemです。このmonorepoにはReact components、Web Components、Sass styles、design tokens、icons、pictograms、themeやlayout関連packageが含まれます。designと実装の共通基盤をそろえ、複数画面・productで一貫したUIを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-03

主な特徴

React componentsとWeb Componentsを用途に応じて選ぶ

@carbon/reactはReact向けcomponentとstyleを提供し、別packageとしてstandards-basedなWeb Componentsも用意されています。applicationのframeworkに合わせて実装方式を選べます。

出典：[1][2]

color・layout・type・motionなどのdesign tokenを共有する

monorepoにはcolors、layout、themes、type、motion、icons、pictograms等のpackageがあり、component以外のvisual ruleも共通化できます。

出典：[1]

Sassから全styleまたは必要なcomponentだけを読み込む

@carbon/reactではSassの@useから全styleを読み込む方法と、button等のcomponent単位で読み込む方法が案内されています。

出典：[2]

向いている用途

複数のWeb productでUI・design ruleを統一したいteamに向く

共通componentとtokenを基盤にし、productごとの独自実装を減らしながら一貫したinteractionとvisual languageを維持したい場合に適します。

出典：[1]

導入前の確認

React・Sassのpeer dependencyと既存style構成を確認する

@carbon/react 1.117.0はReact 16.8.6〜19系とSassをpeer dependencyとして定義しています。導入先のReact version、Sass pipeline、global styleとの競合を確認します。

出典：[3][2]

package install時のIBM Telemetry方針を確認する

@carbon/react READMEはde-identified/anonymized metricsを収集するIBM Telemetryを案内し、opt-out手順も示しています。組織のtelemetry policyに合わせて設定を確認します。

出典：[2]

release単位でpackage versionをそろえて更新する

v11.117.0では@carbon/reactが1.117.0です。Carbonは複数packageのmonorepoなので、関連packageのversion rangeと変更内容を確認しながらupgradeします。

出典：[4][3]

参考にした公式資料

[1]Carbon v11.117.0 README(2026-10-03)
[2]@carbon/react v1.117.0 README(2026-10-03)
[3]@carbon/react v1.117.0 package.json(2026-10-03)
[4]Carbon v11.117.0 release(2026-10-03)
[5]Carbon Apache-2.0 license(2026-10-03)

編集部からの補足

componentだけでなくspacing・color・type・motion等のdesign tokenまで揃うため、複数productでUI基準を統一したい場合に有効です。一方、既存design systemへ部分導入するとtokenやSass layerが競合しやすいため、適用範囲を先に決めると移行しやすくなります。

3ステップで試す

1
@carbon/react 1.117.0とSassを追加する
既存React projectへCarbonのReact packageとstyle compileに必要なSassを追加します。
npm install @carbon/react@1.117.0 sass
2
Button componentとCarbon styleを読み込む
componentをJavaScript/TypeScriptからimportし、Sass entrypointからCarbon styleを読み込みます。
import { Button } from '@carbon/react'; // SCSS: @use '@carbon/react';
3
既存の開発serverで表示を確認する
host applicationを起動し、theme・spacing・typographyと既存global styleの競合がないか確認します。
npm run dev

公式READMEで確認

成長

成長の推移 · 直近30日

9,517 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 137
Open PR: 112

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

scss
design-system
react
javascript
hacktoberfest

Stars: 9,517
Forks: 2,286
Watchers: 97
Open Issues: 969
Contributors: 376
所有者種別: Organization
主要言語: JavaScript
ライセンス: Apache-2.0
リポジトリ最終更新: 2026/10/03