# @carbon/react > React components for the Carbon Design System Latest version **1.118.0** (published 2026-10-07) · Apache-2.0 license · 131.8K weekly downloads ## Install ```sh npm install @carbon/react pnpm add @carbon/react yarn add @carbon/react bun add @carbon/react ``` ## Health **Score 85/100 (A)** — status: active. Positive: moderate downloads; has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. ## Facts | | | |---|---| | Version | 1.118.0 | | Published | 2026-10-07 | | First published | 2021-07-30 | | Weekly downloads | 131.8K | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 19 | | Unpacked size | 5.1 MB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 9496 | | Maintainers | carbon-bot, sstrubberg | | Keywords | ibm, carbon, carbon-design-system, components, react | ## Links - npm: https://www.npmjs.com/package/@carbon/react - Repository: https://github.com/carbon-design-system/carbon - Homepage: https://github.com/carbon-design-system/carbon#readme - Issues: https://github.com/carbon-design-system/carbon/issues - npm.io page: https://npm.io/package/@carbon/react ## Dependencies (19) - [motion](https://npm.io/package/motion.md) ^13.0.0 - [tabbable](https://npm.io/package/tabbable.md) ^6.2.0 - [downshift](https://npm.io/package/downshift.md) 9.4.0 - [flatpickr](https://npm.io/package/flatpickr.md) 4.6.13 - [invariant](https://npm.io/package/invariant.md) ^2.2.3 - [classnames](https://npm.io/package/classnames.md) 2.5.1 - [es-toolkit](https://npm.io/package/es-toolkit.md) ^1.27.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^8.0.0 - [@carbon/layout](https://npm.io/package/@carbon/layout.md) ^11.61.0 - [@carbon/motion](https://npm.io/package/@carbon/motion.md) ^11.54.0 - [@carbon/styles](https://npm.io/package/@carbon/styles.md) ^1.117.0 - [@carbon/utilities](https://npm.io/package/@carbon/utilities.md) ^0.27.0 - [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0 - [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^4.0.0 - [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.27.4 - [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.2.2 - [@carbon/icons-react](https://npm.io/package/@carbon/icons-react.md) ^11.90.0 - [@carbon/feature-flags](https://npm.io/package/@carbon/feature-flags.md) ^1.10.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.118.0 (latest) — 2026-10-07 - 1.118.0-rc.0 (next) — 2026-10-05 - 2.0.0-alpha.3 (v12-alpha) — 2026-10-01 - 0.1.0 (beta) — 2021-07-30 - 2.0.0-alpha.2 — 2026-09-30 - 2.0.0-alpha.1 — 2026-09-30 - 2.0.0-alpha.0 — 2026-09-29 - 1.117.0 — 2026-09-23 - 1.117.0-rc.0 — 2026-09-21 - 1.116.0 — 2026-09-09 - 1.116.0-rc.0 — 2026-09-08 - 1.115.0 — 2026-08-27 - 1.115.0-rc.0 — 2026-08-24 - 1.114.0 — 2026-08-12 - 1.114.0-rc.0 — 2026-08-10 - … 316 more at https://npm.io/package/@carbon/react/versions ## README # @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](https://www.npmjs.com/): ```bash npm install -S @carbon/react ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash yarn add @carbon/react ``` This package requires [Dart Sass](http://npmjs.com/package/sass) in order to compile styles. If you're new to Sass, we recommend checking out the following resources and links: - [Sass Basics](https://sass-lang.com/guide) - [The Sass `@use` documentation for Sass modules](https://sass-lang.com/documentation/at-rules/use/) - [The Carbon Design System FAQ on Sass](https://carbondesignsystem.com/migrating/faq/#sass-and-package-management) For info on how to configure Sass for your project, here are some common framework's documentation worth reviewing: - [Next.js with Sass](https://nextjs.org/docs/app/guides/sass) - [Remix with Sass](https://remix.run/docs/en/1.18.0/guides/styling#css-preprocessors) - [Gatsby with Sass](https://www.gatsbyjs.com/docs/how-to/styling/sass/) Or if you're just using a bundler: - [Parcel with Sass](https://v2.parceljs.org/languages/sass/) - [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors) Or anything else not listed above: - [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/) - [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) - [Snowpack with Sass](https://www.snowpack.dev/guides/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](../styles/docs/sass.md#configuration) section in our Sass docs. ### TypeScript There is an ongoing project to add `*.d.ts` files to `@carbon/react`. Though not all components have yet been typed, you can still use the project successfully in a TypeScript setting, provided you amend to your `tsconfig.json` or equivalent configuration file. Include the `skipLibCheck: true` compiler option: ```json { "compilerOptions": { "skipLibCheck": true } } ``` To track the progress of TypeScript adoption, check out: - [TypeScript Adoption](https://github.com/orgs/carbon-design-system/projects/53) ## 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: ```jsx import { Button } from '@carbon/react'; function MyComponent() { return ; } ``` 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: ```scss // 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](https://react.carbondesignsystem.com/). ### 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: ```jsx import { Add } from '@carbon/react/icons'; function MyComponent() { return ; } ``` For a full list of icons available, checkout our [website](https://carbondesignsystem.com/elements/icons/library/). ## 📖 API Documentation If you're looking for `@carbon/react` API documentation, check out: - [Storybook](https://react.carbondesignsystem.com/) - [Icon Library](https://carbondesignsystem.com/elements/icons/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](/.github/CONTRIBUTING.md)! 👀 ## 📝 License Licensed under the [Apache 2.0 License](/LICENSE). ## IBM Telemetry 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](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection). For more information on the data being collected, please see the [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics). --- _Source: https://npm.io/package/@carbon/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._