Design System

Salesforce Lightning Design System
Alternatives To Design System
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Design System3,444242113a month ago209July 20, 202321otherJavaScript
Salesforce Lightning Design System
Lwc Recipes2,28223 days ago8October 02, 20228cc0-1.0JavaScript
A collection of easy-to-digest code examples for Lightning Web Components on Salesforce Platform
Lwc1,44911922 days ago508August 24, 2023311mitJavaScript
:zap: LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Salesforcedx Vscode879
a day ago1September 06, 2021295bsd-3-clauseTypeScript
Salesforce Extensions for VS Code
Design System React872207a month ago86June 01, 2022159bsd-3-clauseJavaScript
Salesforce Lightning Design System for React
Ebikes Lwc692
5 days ago2cc0-1.0JavaScript
Sample application for Lightning Web Components and Experience Cloud on Salesforce Platform. Part of the sample gallery. Retail use case. Get inspired and learn best practices.
2 years agoapache-2.0JavaScript
This project is archived, please see the readme for additional resources.
3 days ago283otherApex
A collection of unofficial Flow extensions that can be used to enhance Salesforce Flow and Orchestrator.
Base Components Recipes467
4 months ago6mitJavaScript
A collection of base component recipes for Lightning Web Components on Salesforce Platform
Design System Starter Kit334
4 months ago10bsd-3-clauseHTML
Rapid prototyping environment using the Salesforce Lightning Design System
Alternatives To Design System
Select To Compare

Alternative Project Comparisons

Salesforce Lightning Design System

Build Status Dependabot Status

Welcome to the source code repository for Salesforce Lightning Design System, brought to you by Salesforce UX.

SLDS is...

  • Tailored for building Salesforce apps: Using the Lightning Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel.
  • Continuously updated: As long as you’re using the latest version of the Lightning Design System, your pages are always up to date with Salesforce UI changes.

Getting Started

This project utilizes Storybook for component development. If you would like to know more about Storybook or how it works, check out their website.

Project Installation & Setup:

  1. Clone the repository down locally.
  2. cd into the project and run npm install to install all project dependencies.

Running the Development Environment:

The Storybook development environment can be started by running npm start

Whenever you add, remove, or alter a component's css annotation metadata, you'll need to restart Storybook to see those changes.

Configuring Node and NVM

Node v12 is recommended for use with the Design System repository, and NVM is the recommended choice for managing multiple versions of Node on your computer.

A .nvmrc file is included in this project to aid in local development. To utilize it for setting your project's node version, run nvm use in the root of the directory. Additionally, you can set up a deeper shell integration for automatically invoking the nvmrc file when you change into the project directory by following these instructions.

Developing in Storybook

Once the development server is started with npm start, you can load it at http://localhost:9002.


See the annotations guide.


npm start

Starts the Storybook server for local development.

npm run gulp -- lint

Lint the code base for syntax and stylistic errors.

# Lint indentation, Sass, JavaScript files
npm run gulp -- lint

# Lint languages independently
npm run gulp -- lint:sass
npm run gulp -- lint:javascript
npm run gulp -- lint:javascript:test
npm run gulp -- lint:spaces
npm run gulp -- lint:html

# HTML5 validation
npm run gulp -- lint:vnu
# HTML5 validation on comma separated blueprint names
npm run gulp -- lint:vnu --components button,path,trees

# a11y validation
npm run gulp -- lint:a11y
# a11y validation on comma separated blueprint names
npm run gulp -- lint:a11y --components button,path,trees

# Lint examples using vnu, aXe, slds validation, and HTML5 validation
npm run gulp -- lint:examples

Pull Request Checks

To run all the checks a pull request will run in Travis use the following command.

# To run every check against all blueprints
npm run pr-checks

# To run every check but target certain blueprints for slow checks like aXe and vnu
npm run pr-checks -- --components button,path,trees


npm run build-dist

Generate the Lightning Design System into the .dist directory.

npm run gulp -- styles

Compile Sass to CSS into .assets/styles.

npm run gulp -- clean

Delete temporary build and local files.


npm run gulp -- styles:stats: Useful stats about the project's deliverables.


npm test: run all tests


See the troubleshooting guide.

Contributing Back to SLDS

See the contributing guide.


Got Feedback?

Please open a new GitHub Issue.

Popular Lightning Projects
Popular Salesforce Projects
Popular Networking Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Design System
Local Development
Salesforce Lightning