Skip to main contentCarbon Design System


The Carbon React library provides front-end developers and engineers a collection of reusable React components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.



@carbon/react is new for v11. It houses all the components, styles, and icons within a single package. It replaces the need for carbon-components, carbon-components-react, carbon-icons, and @carbon/icons-react packages.

It also includes the bulk of everything you should need from other Carbon packages including @carbon/styles, @carbon/grid, @carbon/layout, @carbon/themes, @carbon/type, etc.

We recommend starting with @carbon/react and not installing other Carbon packages until you find it necessary.

Full details are available in the migration guide and the v11 changelog.

Using npm:
npm install @carbon/react --save
If you prefer Yarn:
yarn add @carbon/react

Getting started

  1. These components require the use of webpack, or a similar module bundler such as Vite, in your project.

  2. Components do not import any of the styles themselves. Styles are provided through @carbon/react as Sass modules. You will likely need to install the Dart Sass package.

npm install sass --save-dev
// or via yarn:
yarn add sass --dev
  1. Once sass is added and configured, @use the SCSS to bring in styling within an index.scss.
@use '@carbon/react';
  1. In most cases you’ll need to import this file within the root file of your app
import './index.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
<App />
  1. Import components and begin building!
import { Button } from '@carbon/react';
import React from 'react';
function App() {
return (
<Button>Hello world</Button>


Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of React Storybook for developing components.

Start the server:
yarn storybook
  1. Open browser to http://localhost:9000/.

  2. Develop components in their respective folders (/components or /internal).

  3. Write stories for your components in /.storybook.

List of available components

View available React Components here. Usage information is available when you select “Docs”.


If you experience any issues while getting set up with @carbon/react, please head over to the GitHub repo for more guidelines and support. Please create an issue if your issue does not already exist.