Skip to main contentCarbon Design System

Frameworks

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.

Resources

Carbon React
Storybook icon
Try React components with CodeSandbox
codesandbox icon

Install

@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.
./index.scss
@use '@carbon/react';
  1. In most cases you’ll need to import this file within the root file of your app
./main.jsx
import './index.scss';


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  1. Import components and begin building!
./App.jsx
import { Button } from '@carbon/react';
import React from 'react';


function App() {
  return (
    <div>
      <Button>Hello world</Button>
    </div>
  );

Development

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”.

Troubleshooting

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.

Edit this page on GitHub
Previous
Developing: Get started
Next
Frameworks: Web Components