@carbon/ibm-security

Carbon for IBM Security

Carbon for IBM Security is an open-source Carbon experience framework built by IBM Security. With the Carbon Design System and IBM Design Language as its foundation, the framework consists of working code, resources, and 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're trying to find something specific, here's a full list of packages that we support!

Package name	Description
Colors	Work with IBM Design Language colors
Grid	Build layouts using the grid system
Layout	Layout-based units and spacing scale
Icons	Iconography assets
Themes	Color tokens available in Carbon for IBM Security
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 -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/ibm-security@latest:

• @latest - Stable
• @canary - Prerelease
• @next - Alpha

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 in the respective version 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.

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

To add all of the components' styles, import the entry point:

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

CSS

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

Documentation

• Guidelines for making contributions to this repo
• Migration guides
  • v1 to v2

Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve documentation. If you're interested, check out our contributing guide.

Troubleshooting

If you experience any issues while using Carbon for IBM Security, please create an issue if your issue does not already exist.

License

Licensed under the Apache License, Version 2.0.