Salesforce Lightning Design System React


Design System React is the React UI component library of Salesforce, and a React port of the Salesforce Lightning Design System. I worked on this project as part of Google Summer of Code 2019, and my work involved implementing new non-implemented components from the Lightning Design System, improving the existing ones, and writing tests for the components, especially focusing on accessibility.



  • Added 9 new components to the Salesforce Design System React Library, and made numerous other contributions to the library through 18+ pull requests.

  • Amongst the top contributors to Salesforce Design System React project, with over 25k lines of code added.

  • Worked on improving the accessibility of the components, and wrote tests for the components using Jest.

  • Had the opportunity to work under mentors from the Salesforce Engineering Team, based in the US, during the 3 months as Google Summer of Code student intern.

Design System React (short for Lightning Design System for React) is a react implementation of the Salesforce Lightning Design System, which an Open Source lightweight, high performance web component framework that powers thousands of apps.

This project aims to extend and improve the DSR library, by implementing different design patterns from the SLDS as React components in DSR. The goal of this project is to help non-UI engineers implement highly interactive web applications with ease, by extending the variety of components that are available to them through the DSR library.

Adding more variety of components will also help DSR to be useful for a wide range of applications, and make it a go-to React UI library.