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.
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.
List of available components
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 git@github.ibm.com:carbon-for-salesforce/carbon-for-salesforce.git
Then navigate to the project folder
cd carbon-for-salesforce
Install dependencies with npm.
Please note, recommended Node.js version is v20. To switch between node
versions we recommend NVM (Node Version
Manager).
npm install
6. Working with Storybook
Start storybook
npm run storybook
Build Storybook
npm run build-storybook
Deploy Storybook
npm run deploy-storybook
Run unit tests
npm test
7. Start local lwc development server
npm 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.