Carbon for IBM Security

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.

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!

Package name	Description
carbon-components	Carbon component styles
carbon-components-react	Carbon React components
@carbon/colors	Work with IBM Design Language colors
@carbon/grid	Build layouts using the grid system
@carbon/icons-react	Iconography assets
@carbon/layout	Layout-based units and spacing scale
@carbon/type	Type tokens used alongside IBM Plex

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

Distribution tags

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

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

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

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

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

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
  • carbon-addons-security to @carbon/ibm-security
  • 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.

Telemetry

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