IBM Design System

Build with Carbon. Ship with confidence.

Carbon is IBM's open-source design system for products and digital experiences. Create consistent, accessible, and performant interfaces at enterprise scale.

// Install Carbon
npm install @carbon/react
// Import and use
import { Button } from '@carbon/react'
Dependencies resolved · Ready
Why Carbon

Designed for enterprise, built for everyone

Carbon scales from individual contributors to teams of thousands, enabling consistent design across the entire IBM product portfolio.

Accessible by default

WCAG 2.1 AA compliant components out of the box. Built with screen reader support and keyboard navigation.

Learn more →
Themeable

Four built-in themes — White, Gray 10, Gray 90, Gray 100. Token-based customization for any brand.

Learn more →
AI-ready

New in v11: AI Label, AI Layer, and AI Explainability components purpose-built for Watson and generative AI surfaces.

Learn more →
200+
Components across all frameworks
8k+
GitHub stars on the core repo
500+
IBM products using Carbon
v11
Latest version with AI components
Component library

Everything you need

View all components →
Inputs
Layout
Data
Feedback
Text input
Buttons
Toggle

Start building with Carbon today

Open source, actively maintained, and battle-tested across 500+ IBM products.

Component catalog

All components

200+ components and patterns ready to use across React, Angular, Vue, and Web Components.

Stable
Button

Triggers an event or action. Five styles: primary, secondary, tertiary, ghost, danger.

Stable
Data table

Displays data in rows and columns with sorting, filtering, batch actions and pagination.

Stable
Modal

A focused dialog that overlays the page content to collect input or display information.

Beta
AI label

Indicates AI-generated content with a consistent slatted icon and tooltip pattern.

Stable
Notification

Inline and toast notifications for status messages: info, success, warning, error.

Stable
Tabs

Organizes content into separate views. Line and contained variants available.

Getting started
Overview
Install
Theming
Components
Button
Data table
Modal
Notification
Getting started

Overview

Carbon is IBM's open-source design system for products and digital experiences. Built on top of the IBM Design Language, Carbon gives teams the tools to ship great experiences faster.

npm install @carbon/react

Frameworks

React
Angular
Vue
Web

Solutions

Carbon solutions for every industry and scale.

About Carbon

Carbon is the open-source design system for IBM's products and digital experiences. 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.