Skip to main contentCarbon Design System

Frameworks

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

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

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

4. Authenticate against Salesforce Developer Sandbox

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

5. Clone project and install dependencies

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

git clone [email protected]:carbon-for-salesforce/carbon-for-salesforce.git

Then navigate to the project folder

cd carbon-for-salesforce

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

6. Working with Storybook

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

Start storybook

npm run storybook

Build Storybook

npm run build-storybook

Deploy Storybook

npm run deploy-storybook

Run unit tests

npm test
or
yarn test

7. Start local lwc development server

npm start
or
yarn start

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.