react-with-styles - Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

•    Javascript

---

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.Create a module that exports an object with shared theme information like colors.

react css css-in-js styles aphrodite radium inline native

postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

•    Javascript

---

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

postcss postcss-runner js inline react css cssinjs

react-animations - A collection of animations for inline style libraries

•    Javascript

---

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.Check out the interactive demo.

react-animations animation react radium css-in-js

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

•    Javascript

---

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

react style styles stylesheet inline bundle extract css

react-native-tableview-simple - Flexible and lightweight React Native component for UITableView made with pure CSS

•    Javascript

---

This cross-platform component is inspired by the iOS-TableView. Made with pure CSS, the intention is to provide a flexible and lightweight alternative to a bridged component. react-native-tableview-simple provides you with some predefined CSS-styles, inspired by the native TableView. You can always mix the Cell-instances inside a Section, with other (React-Native)-Views. Therefore the Cell-Component itself can't be manipulated heavily.

react-native uitableview tableview ios react css react-component crossplatform android

jsxstyle - Inline style system for React and Preact

•    Javascript

---

This repository is the monorepo for runtime versions jsxstyle as well as a few tools designed to be used with jsxstyle. jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance, and has little regard for existing CSS orthodoxy.

css-in-js css inline-styles react preact jsxstyle

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-component react css modules

react-datepicker - A simple and reusable datepicker component for React

•    Javascript

---

You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does). See here for a full list of props that may be passed to the component. Examples are given on the main website.

datepicker-component react moment picker datepicker calendar date react-component

Mantine - A fully featured React components library includes more than 120 customizable components and hooks

•    Typescript

---

Mantine is a fully featured React components library includes more than 120 customizable components and 40+ hooks to manage state and UI management. Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

react-components react-library react hooks typescript accessibility uikit a11y design-system

react-native-css - Style React-Native components with css

•    Javascript

---

React-native-css turns valid CSS into the Facebook subset of CSS. if you still want access to the the old implementation, please check v1 branch.

react react-native react-component css styling components ios

react-media - CSS media queries for React

•    Javascript

---

react-media is a CSS media query component for React.A <Media> component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

react media media-query query css responsive

react-flip-move - Effortless animation between DOM changes (eg

•    Javascript

---

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

reactjs react-flip-move animation react hardware-acceleration flip transition-animation react-dom magic-move component react-component web-animations

babel-plugin-css-in-js - A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e

•    Javascript

---

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server. babel-plugin-css-in-js works seamlessly on both client and server. It has built-in support for media queries, pseudo-classes, attribute selectors, and theming. The plugin's options allow you to configure vendor-prefixing, minification, and class name compression.

babel-plugin css-in-js stylesheet bundler

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.

react css ui styled-components rebass design-system react-components styled-system components grid typography layout color theme emotion react-component presentational stateless functional

react-x-ray - React CSS Layout Debugger

•    Javascript

---

CSS layout debugger component

react css layout debug react-component ui development style

react-mt-svg-lines - A React.js wrapper component to animate the line stroke in SVGs

•    Javascript

---

The component wraps your SVG and animates the stroke-dashoffset property on every path element within. To accomplish this, it injects a style tag with a generated string of CSS. For a description of the technique, see this article. Require MtSvgLines into your component (you can import it under any name)...

svg css-animations reactjs tween higher-order-component stroke path react-component react animate line

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

•    Javascript

---

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.

material-design react ui-kits css-modules components react-component toolkit

gulp-inline-css - Inline linked css in an html file. Useful for emails.

•    Javascript

---

Inline your CSS properties into the style attribute in an html file. Useful for emails. Inspired by the grunt plugin grunt-inline-css. Uses the inline-css module.

gulpplugin inline css html email

react-sticky - <Sticky /> component for awesome React apps

•    Javascript

---

There's a CSS alternative to react-sticky: the position: sticky feature. However it currently does not have full browser support, specifically a lack of IE11 support and some bugs with table elements. Before using react-sticky, check to see if the browser support and restrictions prevent you from using position: sticky, as CSS will always be faster and more durable than a JS implementation. The goal of react-sticky is make it easier for developers to build UIs that have sticky elements. Some examples include a sticky navbar, or a two-column layout where the left side sticks while the right side scrolls.

react-component react sticky

glamor - inline css for react et al

•    Javascript

---

This expands on ideas from @vjeux's 2014 css-in-js talk. We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good. as a compromise, we enable the former 'speedy' mode NODE_ENV=production, and disable it otherwise. You can manually toggle this with the speedy() function.

css inline