Carbon for IBM Security

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.

Getting started

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 -S @carbon/ibm-security

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

Distribution tags

Please use distribution tags to install the most relevant version of this framework. e.g. npm i -S @carbon/[email protected]:

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

React

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.

SCSS

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 node-sass so that node_modules is included in the includePaths option.

@import '@carbon/ibm-security/scss/components/ComponentName/index';

Feature flags

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,
);

@import '@carbon/ibm-security/scss/components/ComponentName/index';

Also refer to feature flags in Carbon.

CSS

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

Documentation

• Contributing: Guidelines for making contributions to this repo
• Migration Guides
  • v1 to v2
• Storybook
• Themes

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

License

Licensed under the Apache License, Version 2.0.