carbon-components - The component library behind Carbon Design System

•    Javascript

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles. The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

carbon - A design system built by IBM

•    Javascript

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

carbon-components-react - React components for the Carbon Design System

•    Javascript

This project has been moved to the Carbon monorepo. The specific package is available here. For more information about this transition, you can check out this post. All issues and pull requests for this package should be made on that repo instead.

carbon-design-kit - A versioned, comprehensive kit of the Carbon Design System visual assets (components, iconography, color palettes, grids, templates)

The Carbon Design Kit is a living, breathing document that contains all of our visual assets (components, iconography, color palettes, grids, templates, responsive behavior, etc). This document evolves and changes as we collaborate with partners and service teams. All of the assets that live in the Design Kit can also be found on our Carbon Design System website. Contains release notes on current and previous versions of the Carbon Design Kit.

carbon-components-svelte - Svelte implementation of the Carbon Design System

•    Svelte

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM. Design systems facilitate design and development through reuse, consistency, and extensibility.

carbon-components-react - React components for the Carbon Design System

•    Javascript

A collection of Carbon Components implemented using React. View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.

carbon-components-angular - An Angular implementation of the Carbon Design System for IBM.

•    TypeScript

Note: This isn't the only way to bootstrap a carbon-components-angular application, but the combination of @angular/cli and the carbon-components scss is our recommended setup. To keep our build dependancies local we use npm scripts to run our webpack, gulp, and general build tasks. You should never install webpack or gulp globally as that will likely conflict with our version. You should never need to modify the build process to add a component or story.

carbon-icons - SVG icon library for the Carbon Design System

•    HTML

SVG icon library for the Carbon Design System

carbon-charts - :bar_chart: :chart_with_upwards_trend: Reusable charts implemented using D3 & typescript

•    TypeScript

A reusable framework-agnostic D3 charting library. Charts' demo and documentation can be viewed in GitHub Pages at https://pages.github.com/IBM/carbon-charts/ and https://pages.github.com/IBM/carbon-charts/documentation/ respectively.

carbon-addons-iot-react - This library contains React components shared between all IBM IoT products to unify our look and feel

•    Javascript

You can find more information about how to use each component by checking out our Storybook.

carbon-addons-cloud - Carbon Design System add-on for IBM Cloud

•    CSS

In addition, make sure to include node_modules in your node-sass config. This will guarantee that all imports work as expected. You can find more about this option here. Component-specific Sass files are also included and can be imported in a similar fashion.

carbon-boilerplate - A simple boilerplate for rapid UI prototyping with Carbon components

•    Javascript

To start using the boilerplate, navigate to app/views/home.html and add some code. You can find code snippets of the Carbon components here. Styles can be added to app/scss/main.scss and images can be added to app/assets/img. To reference these images in your HTML, just use the relative route /assets/img/FILENAME_HERE.jpg|svg|png. Find a bug? Contact me on the Cloud Platform Slack (@tjegan) or submit a new issue.

carbon-charts - :bar_chart: :chart_with_upwards_trend: Reusable charts implemented using D3 & typescript

•    TypeScript

A reusable framework-agnostic D3 charting library.

carbon-custom-elements - [Experimental] Carbon Design System variant on top of Web Components

•    TypeScript

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo. Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

carbon-icons - SVG icon library for the Carbon Design System

•    HTML

SVG icon library for the Carbon Design System

ibm-dotcom-library - IBM.com library based on the Carbon Design System for IBM

•    Javascript

This library is an extension of the Carbon IBM Design System. It contains unique components shared between the IBM.com user journeys to unify its look and feel. Licensed under the Apache 2.0 License.

carbon-elements - [Experimental] Carbon Elements helps developers execute the IBM Design Language in digital and software products

•    Javascript

[Experimental] The Carbon elements project helps developers execute the IBM Design Language in digital and software products. This project contains a collection of packages for different elements of this language. We'll be introducing additional elements over the next several months. In this case, icons is the elements package name that you could install from this project.

ibm-cloud-cognitive - A Carbon-powered React component library for Cloud & Cognitive

•    Javascript

If you're just getting started and looking for React components, take a look at our Storybook. If you want to try out Carbon for Cloud & Cognitive, you can use CodeSandbox.

cache-IoT-data-for-Carbon-UI - Use an API caching server that allows to build quick efficient front-ends with Carbon Design System

•    TypeScript

This code pattern demonstrates an API caching server that can reside between your Carbon Design System based front-end and the API's for your IoT device data, and can help with building quick and efficient interfaces using IBM Carbon UI. The pattern showcases a Node.js server built using Loopback.io that the front-end of an application would communicate with, and which interacts with an IBM Cloudant database that holds information about your IoT device so that your application has cached data even when intermittent communication failures occur with the IoT device. Follow these steps to set up and run this code pattern. The steps are described in detail below.

carbon-addons-dotcom - This library is an extension of the Carbon IBM Design System

•    Javascript

This library is an extension of the Carbon IBM Design System. It contains unique components shared between the IBM.com user journeys to unify its look and feel.