@carbon/react

@carbon/react

React components for the Carbon Design System

Getting started

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

npm install -S @carbon/react

If you prefer Yarn, use the following command instead:

yarn add @carbon/react

This package requires Dart Sass in order to compile styles.

If you're new to Sass, we recommend checking out the following resources and links:

• Sass Basics
• The Sass @use documentation for Sass modules
• The Carbon Design System FAQ on Sass

For info on how to configure Sass for your project, here are some common framework's documentation worth reviewing:

• Next.js with Sass
• Remix with Sass
• Gatsby with Sass

Or if you're just using a bundler:

• Parcel with Sass
• Vite with Sass

Or anything else not listed above:

• Webpack with Sass
• Create React App with Sass
• Snowpack with Sass

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

Usage

The @carbon/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/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/react';

// Or bring in the styles for just one component
@use '@carbon/react/scss/components/button';

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

Icons

The @carbon/react package also provides icon components that you can include in your project. You can import these icon components from the @carbon/react/icons entrypoint:

import { Add } from '@carbon/react/icons';

function MyComponent() {
  return <Add />;
}

For a full list of icons available, checkout our website.

📖 API Documentation

If you're looking for @carbon/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.