$ npm install @salesforce-ux/design-system @salesforce/design-system-react
Welcome to the project! 👋 This library is the React implementation of the Salesforce Lightning Design System. This library has a peer dependency on @salesforce-ux/design-system
, react
, and react-dom
.
A CommonJS-compatible version has been included within the NPM package to allows usage without transpiling. Use the following named import
syntax to access CommonJS components from /lib/index.js
:
import { Button } from '@salesforce/design-system-react';
<Button label="Hello Button" />
Recommended usage requires that your babel presets are set up correctly. create-react-app
and environments that do not transpile code within node_modules
are not compatible with the component import below. All the examples on the documentation site use this syntax. You can use the Babel preset, @salesforce/babel-preset-design-system-react
, to get started. This preset will keep Babel compatible with Design System React and allow ES6 module benefits such as tree-shaking.
import Button from '@salesforce/design-system-react/components/button';
<Button label="Hello Button" />
{
"presets": ["@salesforce/babel-preset-design-system-react"]
}
- 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
If you have support questions, please post a question to StackOverflow and tag with design-system-react
. If you find any bugs, create a GitHub Issue.