Skip to main contentCarbon Design System

1. Installing Carbon

Starting with Create React App, let’s install Carbon and begin using Carbon components. By the end you will have a React app that uses the UI Shell to navigate between pages.

Preview

A preview of what you will build:

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial that we’ll use as a starting point for each step.

Fork

To begin, fork carbon-tutorial using your GitHub account.

Clone

Go to your forked repository, copy the SSH or HTTPS URL and in your terminal run the two commands to get the repository in your local file system and enter that directory.

git clone [your fork SSH/HTTPS]
cd carbon-tutorial

Add upstream remote

Add a remote called upstream so we can eventually submit a pull request once you have completed this tutorial step. There are two choices: SSH or HTTPS

SSH

git remote add upstream [email protected]:carbon-design-system/carbon-tutorial.git

HTTPS

git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git

Verify that your forked repository remotes are correct:

git remote -v

Your terminal should output something like this:

origin  [your forked repo] (fetch)
origin  [your forked repo] (push)
upstream    [email protected]:carbon-design-system/carbon-tutorial.git (fetch)
upstream    [email protected]:carbon-design-system/carbon-tutorial.git (push)

Branch

Now that we have our repository set up, let’s check out the branch for this tutorial step’s starting point. Run the two commands:

git fetch upstream
git checkout -b v11-react-step-1 upstream/v11-react-step-1

Build and start

We have the repository forked to your GitHub account, cloned down to your machine, and the starting branch checked out. Next, install the React app’s dependencies with:

yarn

After the dependencies are installed, you can start the app with:

yarn start

Your default browser should open up with an empty page that says: Hello Carbon! Well, not quite yet. This is the starting point for the Carbon tutorial.

Install Carbon

Even though we installed existing dependencies, we’ve yet to install our v11 Carbon package, @carbon/react, which contains everything you need to build with.

Stop your development server with CTRL-C and install Carbon dependencies with:

yarn add @carbon/[email protected]

Install and build Sass

We need to run a Sass build as the Carbon styles are authored in Sass, so run the following command to install sass as a dependency.

yarn add [email protected]

Then, start the app again. If your app’s currently running, you’ll need to restart it for the new environment variable to be used.

yarn start

The app looks as it did before. Next, let’s prepare our app for a Sass build.

In the src directory, rename index.css as index.scss. Then in index.js update the index.css import to index.scss.

Import carbon-component styles

In index.scss, import the Carbon styles by adding the following at the top of the file:

src/index.scss
@use '@carbon/react';

Making this change to index.scss will cause all of the Carbon Sass to re-compile. Once finished re-compiling the Carbon base styling is applied (IBM Plex Sans font family, font size, weight, colors, etc.)