carbon-components-react

carbon-components-react

React components for the Carbon Design System

Getting started

To install carbon-components-react in your project, you will need to run the following command using npm:

npm install -S carbon-components-react

If you prefer Yarn, use the following command instead:

yarn add carbon-components-react

This package requires Dart Sass in order to compile styles.

If you're new to Sass, or are wondering how to configure Sass for your project, we recommend checking out the following resources and links:

• Sass Basics
• Webpack with Sass
• Next.js with Sass
• Create React App with Sass
• Parcel with Sass
• Vite with Sass
• Snowpack with Sass

Once you get Sass up and running in your project, configure Sass to include node_modules in its includePaths option. For more information, checkout the configuration section in our Sass docs.

Usage

The carbon-components-react package provides components and icons for the Carbon Design System.

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

import { Button } from 'carbon-components-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
@use 'carbon-components-react';

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

For a full list of components available, checkout our Storybook.

API Documentation

If you're looking for carbon-components-react API documentation, check out:

• Storybook
• Icon Library

Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide!

License

Licensed under the Apache 2.0 License.

IBM Telemetry

This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.