Skip to main content

Carbon Design React Components

/ css

IBM have created Carbon Design System for their Cloud products.

The team describe the system as 'a collection of reusable HTML and SCSS partials to build websites and user interfaces'. So it is similar to other boilerplate frameworks.

Benefits

As mentioned, they have reusable components, both HTML and SCSS.

They have decent support for accessibility which has been severely lacking over the years (I was well into Zeldman and accessibility ~2003).

It is easy to customise and create themes. Because of SCSS variables etc it is easy to modify components. They have provided an interactive theme so you can modify and save for your bespoke app.

They have a responsive grid (up to 12 columns) system.

Use with React

Components are usable with the React Carbon Components implementation. They have a guide in the Readme how to install. A great thing they have a Storybook implementation.

Putting it all together

  • Install carbon react components:
    • yarn add carbon-components-react carbon-components carbon-icons
  • Create custom theme
  • Import styles from carbon-components
  • Create grid layout
  • Create React components using Storyboard

E.g:

npx create-react-app carbon

cd carbon

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

# In different terminals:

yarn run storybook
yarn start
yarn test

References