OSS TanbouOn this page
Overview
Carbon is IBM's open-source design system. The monorepo includes React components, Web Components, Sass styles, design tokens, icons, pictograms, themes, layout packages, and supporting tooling. It provides shared design and implementation foundations for consistent product interfaces.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Choose React components or standards-based Web Components
@carbon/react provides React components and styles, while the monorepo also ships a separate standards-based Web Components package for other application architectures.
Share color, layout, typography, motion, and other design tokens
Packages for colors, layout, themes, type, motion, icons, and pictograms let teams share visual foundations beyond individual UI components.
Sources: [1]
Load all Sass styles or only the component styles you need
The @carbon/react documentation shows Sass @use for the complete style layer as well as component-specific style imports such as Button.
Sources: [2]
Best fit
Fits teams standardizing UI and design rules across multiple web products
Shared components and tokens help reduce one-off implementations while maintaining consistent interaction and visual language across products.
Sources: [1]
Before adoption
Check React, Sass, and existing style-system compatibility
@carbon/react 1.117.0 declares peer support for React 16.8.6 through 19 and requires Sass. Verify the host React version, Sass pipeline, and interactions with existing global styles.
Review IBM Telemetry behavior during package adoption
The @carbon/react README describes collection of de-identified and anonymized metrics and links to an opt-out process. Align that setting with organizational telemetry policy.
Sources: [2]
Official sources
- [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)
Supplemental curator note
Carbon provides not only components but also spacing, color, typography, motion, and other design foundations, which helps multiple products share UI conventions. For incremental adoption, define the boundary carefully to avoid conflicts with an existing design system or Sass layer.
Try it in 3 steps
- 1
Add @carbon/react 1.117.0 and Sass
Add the Carbon React package and Sass compiler to an existing React project.
npm install @carbon/react@1.117.0 sass - 2
Import a Button and Carbon styles
Import the component from JavaScript or TypeScript and load the Carbon Sass entrypoint.
import { Button } from '@carbon/react'; // SCSS: @use '@carbon/react'; - 3
Run the host development server
Verify the component along with theme, spacing, typography, and interactions with existing global styles.
npm run dev
Growth
Growth trends · Last 30 days
9,517 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 137
- Open PRs
- 112
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- scss
- design-system
- react
- javascript
- hacktoberfest
- Stars
- 9,517
- Forks
- 2,286
- Watchers
- 97
- Open issues
- 969
- Contributors
- 376
- Owner type
- Organization
- Primary language
- JavaScript
- License
- Apache-2.0
- Repository last updated
- Oct 3, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Redux61,483 Stars
2 shared tag(s) · 2 shared category(s)
make shared-state updates explicit with stores/actions/reducers, while modern code uses Toolkit
TypeScript - Zustand58,784 Stars
2 shared tag(s) · 2 shared category(s)
manage React state with provider-free hook stores and subscribe through selectors
TypeScript - Chakra UI40,674 Stars
2 shared tag(s) · 2 shared category(s)
Combine React components, Ark UI primitives, and design tokens in one accessible design system
TypeScript - Mantine31,795 Stars
2 shared tag(s) · 2 shared category(s)
Standardize React components, hooks, and theming in one UI ecosystem
TypeScript - Bootstrap174,984 Stars
5 shared tag(s) · 1 shared category(s)
Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript
MDX - Storybook91,196 Stars
4 shared tag(s) · 1 shared category(s)
capture UI states once and reuse them across docs, interaction tests, and agent tooling
TypeScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.