# @carbon/styles > Styles for the Carbon Design System Latest version **1.117.0** (published 2026-10-07) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @carbon/styles pnpm add @carbon/styles yarn add @carbon/styles bun add @carbon/styles ``` ## Health **Score 60/100 (C)** — status: active. Positive: no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.117.0 | | Published | 2026-10-07 | | First published | 2021-07-30 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 17 | | Unpacked size | 4.1 MB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 9514 | | Maintainers | carbon-bot, sstrubberg | | Keywords | ibm, carbon, carbon-design-system, components, react | ## Links - npm: https://www.npmjs.com/package/@carbon/styles - 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/styles ## Dependencies (17) - [@ibm/plex](https://npm.io/package/@ibm/plex.md) 6.4.1 - [@carbon/grid](https://npm.io/package/@carbon/grid.md) ^11.64.0 - [@carbon/type](https://npm.io/package/@carbon/type.md) ^11.69.0 - [@carbon/colors](https://npm.io/package/@carbon/colors.md) ^11.60.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/themes](https://npm.io/package/@carbon/themes.md) ^11.83.0 - [@ibm/plex-mono](https://npm.io/package/@ibm/plex-mono.md) 2.5.0 - [@ibm/plex-sans](https://npm.io/package/@ibm/plex-sans.md) 1.1.0 - [@ibm/plex-serif](https://npm.io/package/@ibm/plex-serif.md) 2.0.0 - [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0 - [@ibm/plex-sans-thai](https://npm.io/package/@ibm/plex-sans-thai.md) 1.1.0 - [@carbon/feature-flags](https://npm.io/package/@carbon/feature-flags.md) ^1.10.0 - [@ibm/plex-sans-arabic](https://npm.io/package/@ibm/plex-sans-arabic.md) 1.1.0 - [@ibm/plex-sans-hebrew](https://npm.io/package/@ibm/plex-sans-hebrew.md) 1.1.0 - [@ibm/plex-sans-devanagari](https://npm.io/package/@ibm/plex-sans-devanagari.md) 1.1.0 - [@ibm/plex-sans-thai-looped](https://npm.io/package/@ibm/plex-sans-thai-looped.md) 1.1.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.117.0 (latest) — 2026-10-07 - 1.117.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.116.0 — 2026-09-23 - 1.116.0-rc.0 — 2026-09-21 - 1.115.0 — 2026-09-09 - 1.115.0-rc.0 — 2026-09-08 - 1.114.0 — 2026-08-27 - 1.114.0-rc.0 — 2026-08-24 - 1.113.0 — 2026-08-12 - 1.113.0-rc.0 — 2026-08-10 - … 281 more at https://npm.io/package/@carbon/styles/versions ## README # @carbon/styles > Styles for the Carbon Design System ## Getting started To install `@carbon/styles` in your project, you will need to run the following command using [npm](https://www.npmjs.com/): ```bash npm install -S @carbon/styles ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash yarn add @carbon/styles ``` This package requires [Dart Sass](http://npmjs.com/package/sass) in order to compile. It uses [Sass modules](https://css-tricks.com/introducing-sass-modules/) to organize the codebase and provide exports to use. 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](https://sass-lang.com/guide) - [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/) - [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) - [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) - [Parcel with Sass](https://v2.parceljs.org/languages/sass/) - [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors) - [Snowpack with Sass](https://www.snowpack.dev/guides/sass/) Once you get Sass up and running in your project, make sure to configure Sass to include `node_modules` in its `includePaths` option. For more information, checkout the [configuration](./docs/sass.md#configuration) section in our Sass docs. ## Usage You can bring in all the styles for the Carbon Design System by including `@carbon/styles` in your Sass files. For example: ```scss @use '@carbon/styles'; ``` If you only would like to bring in specific components from Carbon, you can import them in a similar way: ```scss @use '@carbon/styles/scss/reset'; @use '@carbon/styles/scss/components/accordion'; @use '@carbon/styles/scss/components/button'; @use '@carbon/styles/scss/components/checkbox'; ``` There are various helpers that you can include from Carbon, as well, such as a CSS reset, grid, breakpoint helpers, and more. You can include these similar to how you bring in components: ```scss // Bring in the CSS Reset @use '@carbon/styles/scss/reset'; // Bring in the CSS Grid @use '@carbon/styles/scss/grid'; ``` To learn more about the various helpers that `@carbon/styles` provides, checkout the overview of the files available to use in our [Sass docs](./docs/sass.md#files). ## Replacing the typeface Carbon is designed, tested, and tuned for IBM Plex. We do not recommend replacing the Carbon typeface. If you absolutely need to use a different typeface, you'll need to treat it as a build-time Sass customization that your application owns. There is no support for runtime typeface overrides on prebuilt/CDN Carbon styles. > [!WARNING] > **Use at your own risk** > > Overriding the Carbon typeface has broad design and accessibility > implications. Carbon type styles are tuned with IBM Plex metrics in mind, > including line heights, letter spacing, weight, glyph proportions, ligatures, > and fallback behavior. A replacement typeface can change layout, wrapping, > density, readability, and interaction states. It can be a significant design > and engineering effort to make another typeface work correctly across an > application. To use Carbon with a different typeface, three things are needed: 1. Turn off Carbon's Plex `@font-face` generation 2. Change the root `font-family` definition(s) 3. Supply your own `@font-face` rules You can accomplish the first two by configuring the Sass entrypoint that your application compiles. This configuration must happen before any other `@use` of Carbon Sass modules. ```scss @use 'sass:string'; @use '@carbon/styles' with ( // Turn off Carbon's Plex `@font-face` generation $css--font-face: false, // Change the root `font-family` definition(s) $font-families: ( 'sans': string.unquote( "'Inter Local', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" ), 'mono': string.unquote( "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace" ), 'serif': string.unquote( "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif" ), // Include any other Carbon font family keys your application compiles. ) ); ``` `$font-families` is not merged with Carbon's defaults. If you configure this map, include every family key your compiled styles need, such as `sans`, `mono`, `serif`, or any additional language-specific Plex stacks used by your application. Then, supply your own `@font-face` rules to load your replacement font assets. ```scss @font-face { font-display: swap; font-family: 'Inter Local'; font-style: normal; font-weight: 400; src: url('./fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Inter Local'; font-style: normal; font-weight: 600; src: url('./fonts/inter-latin-600-normal.woff2') format('woff2'); } ``` Only load the weights, styles, and Unicode ranges that your application needs, but make sure they cover the font weights and styles your Carbon usage emits. If you use a third-party font service, review its privacy and regional compliance implications carefully, including whether font requests expose user data in ways your application cannot accept. ## Theming You can change the default theme of Carbon by doing the following: ```scss @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme' with ( $theme: themes.$g100 ); ``` This example uses a built-in theme from Carbon provided by the `scss/themes` entrypoint. You can also use a custom theme, or add your own custom tokens to extend the theme. ```scss // Configure with a custom theme @use '@carbon/styles/scss/theme' with ( $theme: ( background: #e2e2e2, text-primary: #ffffff, ) ); ``` ```scss // Extend the g100 theme with your own tokens @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme' with ( $fallback: themes.$g100, $theme: ( custom-token-01: #000000, ) ); ``` ### Design tokens You can access the design tokens defined by the Carbon Design System through the `@carbon/styles/scss/theme` entrypoint. This file will allow you to refer to tokens using Sass Variables as well as get the current value for any token in the current theme. For example: ```scss @use '@carbon/styles/scss/theme'; body { background: theme.$background; } ``` For a full list of tokens available for you to use, check out our [theming documentation](../themes/docs/sass.md#tokens). ## 📖 API Documentation If you're looking for `@carbon/styles` API documentation, check out: - [Sass](./docs/sass.md) ## 🙌 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/styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._