design-system-react - Salesforce Lightning Design System in React

  •        37

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. It is tested with React 16 and has a stable API despite its version number. Please polyfill this library in order to meet your target environment needs. Please view Create React App Setup for more information on using this library with Create React App.

https://react.lightningdesignsystem.com
https://github.com/salesforce/design-system-react

Dependencies:

@salesforce/babel-preset-design-system-react : ^1.0.0
classnames : ^2.2.5
create-react-class : ^15.6.0
lodash.assign : ^4.0.9
lodash.compact : ^3.0.0
lodash.escaperegexp : ^4.1.1
lodash.find : ^4.3.0
lodash.findindex : ^4.3.0
lodash.flatten : ^4.2.0
lodash.isboolean : ^3.0.3
lodash.isdate : ^4.0.1
lodash.isequal : ^4.2.0
lodash.isfunction : ^3.0.8
lodash.isnumber : ^3.0.3
lodash.memoize : ^4.1.1
lodash.omit : ^4.3.0
lodash.partial : ^4.1.3
lodash.reject : ^4.3.0
lodash.uniqueid : ^4.0.0
popper.js : ^1.10.8
prop-types : >=15.5.8
react-highlighter : ^0.4.0
react-modal : 3.4.4
react-onclickoutside : ^6.5.0
react-required-if : ^1.0.3
react-text-truncate : ^0.12.0
shortid : ^2.2.6
warning : ^3.0.0

Tags
Implementation
License
Platform

   




Related Projects

design-system-starter-kit - Rapid prototyping environment using the Salesforce Lightning Design System

  •    HTML

Rapid prototyping environment using the Salesforce Lightning Design System, HTML, and Sass. From the prototyper to the large application developer… the Design System Starter Kit is a helpful tool to get started and run prototypes of all sizes in the browser.

design-system - Salesforce Lightning Design System

  •    Javascript

Welcome to the Salesforce Lightning Design System brought to you by Salesforce UX. Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.

ng-lightning - Native Angular 2 components & directives for Lightning Design System

  •    Typescript

This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS framework.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

aura - Aura is a UI framework for developing dynamic web apps for mobile and desktop devices, while providing a scalable long-lived lifecycle to support building apps engineered for growth

  •    Javascript

Aura is an open-source UI framework built by Salesforce for developing dynamic web apps for mobile and desktop devices. You can use open-source Aura to build apps independent of Salesforce. Salesforce uses Aura to build apps, such as Lightning Experience and the Salesforce app.


design-system - Priceline.com Design System

  •    Javascript

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on. For all contributors, please be sure to read the Contributing doc.

design-system-components - 🛠 Component code and tests for the Australian Government design system

  •    HTML

The components for the Australian Government Design System. The design system components are distributed through the npm ecosystem and can only be installed through the npm command. Npm requires node.js and the components needs node.js 8 or higher.

MavensMate - MavensMate is a collection of open source projects that aims to make building Salesforce applications accessible to developers who prefer to build applications using their local machine in text editors like Sublime Text, Atom, and Visual Studio Code

  •    HTML

MavensMate is no longer being actively developed or supported. We recommend using Salesforce's official Visual Studio Code plugin for building Salesforce applications. MavensMate is a collection of open source projects that aims to make building Salesforce applications accessible to developers who prefer to build applications using their local machine in text editors like Sublime Text, Atom, and Visual Studio Code. MavensMate is created and maintained by Joe Ferraro with support from Mavens and these amazing contributors.

carbon - A design system built by IBM

  •    Javascript

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

vue-design-system - An open source tool for building UI Design Systems with Vue.js

  •    Javascript

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

alva - Create living prototypes with code components.

  •    TypeScript

Alva is a radically new digital design tool built for cross-functional product teams. Alva works with your production frontend components, adding up-to-date, responsive, and interactive designs to your living styleguide.

shards-dashboard-react - ⚛ī¸A free and beautiful React admin dashboard template pack.

  •    Javascript

A free React admin dashboard template pack featuring a modern design system and lots of custom templates and components. ✨ Note: You can download the Sketch files from the official product page.

react-uwp - 📱⌨ī¸ React Components that Implement Microsoft's UWP Design & Fluent Design.

  •    TypeScript

React Components that Implement Microsoft's UWP Design & Fluent Design System. Visit react-uwp.com online to review the API, see the components in action with live. Or build the documentation to locally.

Keen-UI - A lightweight collection of essential UI components written with Vue and inspired by Material Design

  •    Javascript

Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design. However, Keen UI is not meant to be a full implementation of the Material Design spec. Keen UI is not a CSS framework. As such, it doesn't include a grid system, typography styles, etc. Instead, the focus is on interactive components that require Javascript.

argon-design-system - Argon - Design System for Bootstrap 4 by Creative Tim

  •    CSS

Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites. Argon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.

shards-react - ⚛ī¸A beautiful and modern React design system.

  •    Javascript

Shards React is a free, beautiful and modern React UI kit based on Shards. Getting started with Shards React is fairly simple. You can download Shards React via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.

carbon-components-react - React components for the Carbon Design System

  •    Javascript

A collection of Carbon Components implemented using React. View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.