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
Storybook icon
Try React components with Stackblitz
stackblitz icon
Carbon React tutorial
react icon

Install

Using npm: 
npm install --save @carbon/react

If you prefer Yarn:

 
yarn add @carbon/react

Getting started

The 

@carbon/react
package provides components, styles and icons for the Carbon Design System.

Components require the use of a build pipeline in your project. This could be in the form of a bundler, framework, or other build tool. Some examples include Next.js, Vite, Parcel, and Webpack. A comprehensive list is available in the react documentation.

To use a component, you can import it directly from the package:

import { Button } from '@carbon/react';


function MyComponent() {
  return <Button>Example usage</Button>;
}

To include the styles for a specific component, you can either import all the styles from the project or include the styles for a specific component:

// Bring in all the styles for Carbon in your root/global stylesheet
@use '@carbon/react';


// Or bring in the styles for one component
@use '@carbon/react/scss/components/button';

Icons

The @carbon/react package also provides icon components that you can include in your project. You can import these icon components from the 

@carbon/react/icons
entrypoint:

import { Add } from '@carbon/react/icons';


function MyComponent() {
  return <Add />;
}

A full list of available icons is provided in the icon library.

For a more in depth introduction to using 

@carbon/react
in a webpack-based app, check out our React tutorial.

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We use 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. Author stories within the 

    *.stories.js*
    files.

List of available components

View available React Components in the 

@carbon/react
storybook. Usage information is available under the “docs” tab.

Troubleshooting

If you experience any issues while getting set up with Carbon Components 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