Note: This project has moved to the Carbon for Cloud & Cognitive monorepo. The specific package is available here.

All issues and pull requests for this package should be made on that repo instead.

Carbon for IBM Security is an open-source React component library built by IBM Security. With the Carbon Design System and IBM Design Language as its foundation, the library consists of working code and resources, maintained by a vibrant community of contributors.

If you're just getting started and looking for React components, take a look at our Storybook.

If you only want to try out Carbon for IBM Security, you can also use CodeSandbox.

If you're trying to find something specific, here's a full list of packages that we support!

To install Carbon for IBM Security in your project, you'll need to run one of the following commands using a package manager:

# npm - https://www.npmjs.com
npm i @carbon/ibm-security

# Yarn - https://yarnpkg.com
yarn add @carbon/ibm-security

Please use distribution tags to install the most relevant version of this library. e.g. npm i @carbon/ibm-security@latest:

• @latest - Stable
• @canary - Unstable prerelease
• @experimental - Experimental features
• @next - Upcoming

All components come with any installation of Carbon for IBM Security. You can use them by doing the following in your project:

// ES Modules - https://tc39.es/ecma262/#sec-modules
import { ComponentName } from '@carbon/ibm-security';

// CommonJS - http://www.commonjs.org
const { ComponentName } = require('@carbon/ibm-security');

Babel builds both of these variants and imports carbon-components-react using a plugin, so that no further transpilation is required.

To add a component style to your build, import the component directly. Importing a component this way will bring in any dependencies that component has as well. The import system removes duplicate dependencies, so shared dependencies between components will not create extra CSS.

In addition, to resolve your import declarations, you will need to setup sass so that node_modules is included in the includePaths option.

@use '@carbon/ibm-security/scss/components/ComponentName';

Carbon for IBM Security takes advantage of feature flags to conditionally enable or disable features. To configure feature flags, you will need to update the $security--feature-flags map before importing any Sass files. For example:

$security--feature-flags: (
  css-gridish: false,
  ibm-type: false,
  security--css-custom-property-theming: false,
);

@use '@carbon/ibm-security/scss/components/ComponentName';

Also refer to feature flags in Carbon.

To add all of the components' processed and minified styles, reference @carbon/ibm-security/css/index.min.css.

• Contributing: Guidelines for making contributions to this repo
• Migration Guides
  • carbon-addons-security to @carbon/ibm-security
  • v1 to v2
• Storybook
• Themes

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 and Carbon's Developer Guide.

Licensed under the Apache License, Version 2.0.

This project collects product dependency information for IBM and Carbon Design System properties.