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 Stackblitz
stackblitz 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 NextJS, 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';
</