Up & Running with Carbon React in less than 5 minutes 🚀

If you haven’t heard of the Carbon Design System before, check us out! We’re a design system for IBM, shipping open-source styles and React components for anyone building on the web.

The recent release of Create React App 2.0 makes it easier than ever to get up and running with the Carbon Design System. With the addition of more styling options, like Sass and CSS Modules, we can bring in all of Carbon into a project built with Create React App without ever having to eject 🎉.

For those who want a quick video showing what you need to do, take a look at the clip below. Otherwise, we’re going to go through step-by-step how you can get up and running with the Carbon Design System in less than 5 minutes using Create React App. Let’s get started! 😎

tl;dr

Creating your project

The first command that we’ll need to run in our terminal is the following from create-react-app in order to create our project:

npx create-react-app my-project

This command will fetch the latest create-react-app package from the npm registry and scaffold out a project under the directory my-project.

When this process is finished, you should see a prompt that details all the commands that are available in your project. Let’s run the following so that we can start installing some additional dependencies for our project:

cd my-project

After changing our working directory to my-project, we will need to install our Carbon-specific dependencies. For these, we can run the following command:

yarn add carbon-components carbon-components-react carbon-icons

Note: you can also use npm for any of these commands

In addition, we’ll need to install node-sass as a development dependency so that our Sass files compile. To do this, we run:

yarn add node-sass --dev

Once node-sass finishes installing, we can start working on rendering a Carbon component in our project. In order to have our components render correctly, we’ll need to rename the provided index.css file to index.scss.

Inside of index.scss, we’ll want to include an import for the styles from carbon-components. This import statement will look like the following, and should be included at the top of index.scss:

@import '~carbon-components/scss/globals/scss/styles.scss';

index.scss file with an import for carbon-components

We’ll also need to update our index.js file to import index.scss instead of index.css

update index.js to include index.scss

Using a Carbon component

Now that we’ve updated index.js and index.scss, our project should be including the styles from carbon-components. To help verify this, let’s go ahead and bring in a Button component and add it to App.js. We’ll start off by importing our Button component by doing:

import { Button } from 'carbon-components-react';

We can then use our Button component inside of the render method of App by placing the following JSX Element in our markup:

<Button>Hello React!</Button>

App.js with Button import and <Button> defined in render

After adding Button to the render method of App, we are good to go! Let’s start our development server by running:

yarn start

Once your browser window connects, you should see a familiar screen now with a Carbon Button component!

Preview after running yarn start

Wrapping up

In this post, we went through how to get up-and-running with the Carbon Design System using Create React App 2.0 in less than 5 minutes. If you’re curious about learning more about Carbon, definitely check out our website and our Storybook for React components.

If you have any feedback, feel free to reach out in the comment section below or on any one of our GitHub repos!

Carbon is an open-source design system for IBM, offering styles, components, patterns, and guidelines for anyone building on the web.

Questions or comments about Carbon? Reach out at carbon@us.ibm.com or tweet us @_carbondesign.