Salesforce Lightning Design System components built with React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json change ver to 2.5.7 Jan 4, 2018

React Lightning Design System

Build Status

Salesforce Lightning Design System components built with React.

See the demo.


$ npm install react-lightning-design-system


import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-lightning-design-system';

function click() { alert('Clicked'); }

    <Button onClick={ click }>Simple</Button>
    <Button type='neutral' onClick={ click }>Neutral</Button>
    <Button type='brand' onClick={ click }>Brand</Button>
    <Button type='neutral' icon='download' iconAlign='left' onClick={ click }>Icon #1</Button>
    <Button type='neutral' disabled>Disabled Neutral</Button>
    <Button type='brand' disabled>Disabled Brand</Button>
, document.body);

See more examples in examples directory.

Running example stories locally

This repo ships with a react storybook based story scripts. To run stories and get component examples, follow these steps:

  1. run npm install
  2. run npm run storybook
  3. Find the stories running on localhost:9001.

Snapshot testing in react storybook

This repo ships with story snapshots to examine differences in rendering as a result of changes to source code.

To identify render differences run npm run test:storyshots. If all changes are intentional run npm run test:storyshots -- -u. To learn about other run options including interactive mode, read Snapshot Testing in React Storybook