@carbon/react

React components for the Carbon Design System.

Installation

npm install @carbon/react

If you compile Carbon styles in your application, install Dart Sass as well:

npm install sass

For Sass configuration, see Carbon's Sass documentation.

TypeScript declarations are included.

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 all Carbon styles, use:

@use '@carbon/react';

To include styles for a specific component, use:

@use '@carbon/react/scss/components/button';

For a full list of available components, see 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 available icons, see the Carbon Icon Library.

Contributing

See the Contributing Guide.

License

Licensed under the Apache 2.0 License.

IBM Telemetry

This package uses IBM Telemetry to collect de-identified and anonymized 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.