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.
If you're just getting started and looking for React components, take a look at our Storybook.
If you just 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 -S @carbon/ibm-security
# Yarn - https://yarnpkg.com
yarn add @carbon/ibm-securityPlease use distribution tags to install the most relevant version of this framework. e.g. npm i -S @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 in the respective version 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 node-sass so that node_modules is included in the includePaths option.
@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';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/index';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.
Themes are used for applying color in Carbon for IBM Security and offered by outputting CSS custom properties for theme tokens. Check out our theming documentation for guidelines.
You can learn web development best practices and the ins and outs of using Carbon components by creating a React app with the Carbon Design System.
If you want to show the world your new skills, you can apply for an IBM Digital Badge.
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.
If you experience any issues while using Carbon for IBM Security, please create an issue if your issue does not already exist.
Licensed under the Apache License, Version 2.0.