react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •        12

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

http://react-toolbox.io/
https://github.com/react-toolbox/react-toolbox

Dependencies:

@babel/runtime : ^7.1.2
@types/prop-types : ^15.5.6
classnames : ^2.2.6
core-js : ^2.5.7
react-css-themr : ^2.1.2
react-style-proptype : ^3.2.2
react-transition-group : ^2.5.0

Tags
Implementation
License
Platform

   




Related Projects

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.

material-ui - React components that implement Google's Material Design.

  •    Javascript

React components that implement Google's Material Design. Material-UI is available as an npm package.

react-native-material-kit - Bringing Material Design to React Native

  •    Javascript

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly. First, cd to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command npm i -S react-native-material-kit and link it manually (see below).

react-toolbox-themr - A tool to statically extract and generate custom themes for React Toolbox

  •    Javascript

A command line tool to help you extract react-toolbox style modules to static files so you can integrate it in nearly any stack. Note it only works with React Toolbox 2.0 beta. The output path shown in the GIF is outdated, now by default the assets are generated at src/toolbox.


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.

mrn - Material React Native (MRN) - A Material Design style React Native component library.

  •    Javascript

This repository is no longer maintained because there is no time to maintain. Recommend another one: React Native Material Design, which is heavily developed on top of the mrn project.

material-dashboard-react - React version of Material Dashboard by Creative Tim

  •    Javascript

Material Dashboard React is a free Material-UI Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard React was built over the popular Material-UI framework. Material Dashboard React makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-notification - Provides snackbar notifications for React

  •    Javascript

React Notification provides snackbar notification messages and notification stacks. The default visual style and interaction follows Material Design guidelines for snackbars and can be fully customized. Copyright (c) 2015-2018 Patrick Burtchaell.

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.

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.

storybook - UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!

  •    TypeScript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

react-md - React material design

  •    Javascript

react-md is a set of React components and sass files for implementing Google's Material Design. The Documentation Website can be used for viewing live examples, code samples, and general prop documentation. There are also a few examples available within the examples folder to help get you started.

react-docgen - A CLI and toolbox to extract information from React component files for documentation generation purposes

  •    Javascript

react-docgen is a CLI and toolbox to help extracting information from React components, and generate documentation from it.It uses recast and babylon to parse the source into an AST and provides methods to process this AST to extract the desired information. The output / return value is a JSON blob / JavaScript object.

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.

storybook - Interactive UI component dev & test: React, React Native, Vue, Angular

  •    Javascript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

react-css-themr - Easy theming and composition for CSS Modules.

  •    Javascript

Easy theming and composition for CSS Modules. Note: Feedback and contributions on the docs are highly appreciated.

NativeBase - Essential cross-platform UI components for React Native

  •    Javascript

NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native. What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.