Skip to content

carbon-design-system/ibm-security

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Licensed under the Apache License, Version 2.0 CircleCI Netlify Status PRs Welcome

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.

Edit 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

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.