grid-styled - Responsive React grid system built with styled-system

•    Javascript

---

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

react grid styled-components flexbox css styled-system margin padding css-in-js layout responsive emotion

styled-system - Design system utilities for styled-components and other css-in-js libraries

•    Javascript

---

Design system utilities for styled-components, glamorous, and other css-in-js libraries

react css-in-js design-systems styled-components glamorous glamor typography layout emotion fela cxs responsive

react-styled-flexboxgrid - Grid system based on styled-components and flexbox for React

•    Javascript

---

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

flexbox grid react styled-components styled

smooth-ui - Modern React UI library 💅👩‍🎤🍭

•    Javascript

---

Modern React UI library. Code less, do more. Smooth UI is a style system / UI library for React. It works with Styled Components 💅 or Emotion 👩‍🎤.

styled-components ui ui-components react material-ui bootstrap ui-library

styled-css-grid - 🍱 A tiny CSS grid layout for React

•    Javascript

---

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.

react grid css styled-components

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

•    Javascript

---

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

styled-components css react js styles scss styling color-manipulation theme-color themes manipulation-methods sass selector theme theming colors

styled-components - Visual primitives for the component age

•    Javascript

---

If you are looking for styled-components v4.0 (under active development), check out the roadmap and dev branch. styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

react css-in-js styled-components css

styled-tools - Useful interpolated functions for CSS-in-JS

•    Javascript

---

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

styled-components react css-in-js lodash utilities emotion jss styled-tools

react-mdl - React Components for Material Design Lite

•    CSS

---

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

react react-component mdl material-design badge button card checkbox data-table fab-button icon icon-button icon-toggle radio radio-group switch textfield progress progress-bar spinner slider tooltip menu dropdown layout drawer grid tabs

react-fine-uploader - Easily integrate Fine Uploader or Fine Uploader S3 into a React app

•    Javascript

---

Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. These allow you to easily build a highly customizable and powerful UI for your upload widget, backed by Fine Uploader's core feature set. Most of these components are unstyled (i.e. ready to be styled by you). Focused component-specific stylesheets may be provided at a later date.

react fineuploader ui components drag-and-drop file blob file-uploader fine-uploader jsx upload widget

tachyons-components - React UI components powered by Tachyons with a styled-components like API

•    Javascript

---

React UI components powered by Tachyons with a styled-components like API.

react tachyons components

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

•    Javascript

---

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.

salesforce react salesforce-lightning frontend ui design-systems slds lightning reactjs salesforce-ux design-system lightning-design-system salesforce-lightning-design-system interactive-components interactive components

react-css-components - Define React presentational components with CSS

•    Javascript

---

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

css-in-js react webpack css-modules react-dom css postcss postcss-plugin webpack-loader

toolkit - User interface components built on React.

•    Javascript

---

Titon Toolkit is a collection of very powerful user interface components built on React. Components in Titon follow the presentational paradigm, which provide full control of how, where, and why components are rendered. Functionality within a component, like jumping to the next slide in a carousel, or toggling a menu, is possible through contexts -- a type of public API.

titon toolkit css sass scss react aesthetic ui interface framework bootstrap modular component responsive fluid mobile behavior

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

•    TypeScript

---

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

react webpack starter-kit postcss ssr reactjs apollo apollo-client graphql webpack4 styled-components typescript hot-reload helmet sass less gzip brotli server-side-rendering universal

ant-design - 🐜 A UI Design Language

•    TypeScript

---

An enterprise-class UI design language and React-based implementation. Read our contributing guide.

css react ui-kit ui-design typescript enterprise react-components antd design-systems frontend ant-design ant design react-component component components ui framework

macro-components - Create flexible layout and composite UI components without the need to define arbitrary custom props

•    Javascript

---

Create flexible layout and composite UI components without the need to define arbitrary custom props. Note: Macro components are intended to only work with specific child components. If you're wanting to define slots, see the Alternatives section below.

react components composite-components style ui styled-components macro

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.

carbon-design-system react carbon carbon-components

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

•    Javascript

---

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

css-modules flexbox-grid react-components flexbox grid react react-component

react-bluekit - Automatically generating a component library from your React components (ES5, ES6, Typescript)

•    Javascript

---

BlueKit automatically generates a library from your React components with editable props and live preview. Point BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.

react react-components visualization typescript tooling blueberry-opensource es6 es7 babel react-component playground development ui-ki ui design node