Design System for React

Accessible, localization-friendly, presentational React components

Overview

Welcome to the project! 👋 This library is the React implementation of the Salesforce Lightning Design System.

• Getting Started (Salesforce Employees)
• Documentation and examples (Salesforce Employees)
• Component Best Practices
• FAQ (Salesforce Employees)

ECMAScript 6 and CommonJS modules

It is highly recommended that you npm install the -es suffixed tag and import individual components. You will need a stage-1 and higher proposed features transpiler (stage-1 Babel preset or review our .babelrc). The non-suffixed package is a CommonJS build.

Local development Storybook and in-browser test server

npm install
npm start
open http://localhost:9001 http://localhost:8001

Getting Started

design-system-react is compatible with React >=15.4.1 <16 and may work with React 16. This library and it's markup will be updated to the next version of SLDS styles at release freeze. You can find the current SLDS version, a getting started (Salesforce Employees) and a Concepts and Best Practices guide on the documentation site.

SLDS Icons

Prior to v0.7.0, SLDS icons were inlined and just worked. Now you will need to host the icons and set a path context for all child components with <IconSettings>:

import IconSettings from 'design-system-react/components/icon-settings';

ReactDOM.render(
	<IconSettings iconPath="/assets/icons">
		<MyApp />
	</IconSettings>,
	document.getElementById('app')
	)

Example

Add the following line to your package.json devDependencies and run npm install.

# package.json

"design-system-react": "git+ssh://git@github.com:salesforce/design-system-react.git#v[VERSION]",

The bundled files are provided only for convenience.

• design-system-react.min.js (700KB+) - includes icons in the JavaScript
• design-system-react-components.min.js (~400KB) - no icons.

Import and use only the components you need:

import Tooltip from 'design-system-react/components/popover-tooltip';
import Icon from 'design-system-react/components/icon';
import IconSettings from 'design-system-react/components/icon-settings';

<IconSettings iconPath="/assets/icons">
  <Tooltip
    align="top"
    content={<span>Here is more information.</span>}
  >
    <a href="javascript:void(0)">
      <Icon assistiveText="More Info" category="utility" name="info" className="slds-icon-text-default" />
    </a>
  </Tooltip>
</IconSettings>

Contributing to the code base

Please read the CONTRIBUTING.md and Test README first. Then, create an issue to tell others you are working on a bug. If you would like to contribute a new component, create an issue with a list of proposed props to discuss with maintainers.

Licenses

• Source code is licensed under BSD 3-Clause
• All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
• The Salesforce Sans font is licensed under our font license

Got feedback?

Create an issue for bugs. Support questions should be asked on StackOverflow.