Carbon Design System

The Carbon for Salesforce team builds and maintains the Lightning Web Components (LWC) version of Carbon components along with additional custom components. This library provides front-end developers and engineers a collection of reusable lightning web components to build websites and user interfaces on the Salesforce platform.

The LWC components are maintained by the Carbon for Salesforce team. V11 upgrade is currently underway. Please reach out for support and contribution.

Resources

Carbon for Salesforce Storybook

Carbon for Salesforce Repository

Overview

The LWC carbon component library, formally known as Carbon for Salesforce Design System (C4S), is an IBM internal asset and it should be used for IBM projects only. We have plans to open source it in the near future.

The design system contains selected components from the Carbon Design System, Carbon for IBM.com, and Carbon for IBM Products, along with custom components bespoke to Salesforce platform products.

Within IBM, C4S is used by the Cognitive Support Platform project with ibm.com/support being the client facing experience of IBM Support. We’re also just kicking off the use of C4S on IBM Partner Portal.

List of available components

We are starting to develop components based on Carbon v11 in 2022 Q2. The source code and setup instructions can be found on the GitHub respository.

See list of available components in Storybook.

Additional documentation is available in ISC Playbook.

Getting started

1. Install the Salesforce CLI

Verify your installation with

sfdx --version
Copy to clipboard

2. Get Visual Studio Code Plugins

Check that our environment is ready for creating Lightning Web Components by pressing Command + Shift + P on macOS or Ctrl + Shift + P on Windows and type sfdx.

3. Set up LWC Local Development Server

Learn more about the lwc-dev-server plugin at official documentation.

sfdx plugins:install @salesforce/lwc-dev-server
Copy to clipboard

4. Authenticate against Salesforce Developer Sandbox

sfdx force:auth:web:login -a "<NAME-OF-SANDBOX>" -r https://<NAME-OF-SANDBOX>.my.salesforce.com/ -s
Copy to clipboard

5. Clone project and install dependencies

Clone the repository using an SSH key. Alternatively, HTTPS should work too.

git clone git@github.ibm.com:carbon-for-salesforce/carbon-for-salesforce.git
Copy to clipboard

Then navigate to the project folder

cd carbon-for-salesforce
Copy to clipboard

Install dependencies with either npm or yarn.

Please note, recommended Node.js version is v16. To switch between node versions we recommend NVM (Node Version Manager).

npm install

or

yarn
Copy to clipboard

6. Working with Storybook

All commands below works if npm run is replaced with yarn.

Start storybook

npm run storybook
Copy to clipboard

Build Storybook

npm run build-storybook
Copy to clipboard

Deploy Storybook

npm run deploy-storybook
Copy to clipboard

Run unit tests

npm test

or

yarn test
Copy to clipboard

7. Start local lwc development server

npm start

or

yarn start
Copy to clipboard

Troubleshooting

If you experience any issues while getting set up with Carbon LWC components, please head over to the GitHub repository for more guidelines and support. Please create an issue if your issue does not already exist.

Edit this page on GitHub

Frameworks: Svelte

Frameworks: Vanilla