styled-components - Visual primitives for the component age

  •        11

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.

https://styled-components.com
https://github.com/styled-components/styled-components

Dependencies:

buffer : ^5.0.3
css-to-react-native : ^2.0.3
fbjs : ^0.8.16
hoist-non-react-statics : ^2.5.0
prop-types : ^15.5.4
react-is : ^16.3.1
stylis : ^3.5.0
stylis-rule-sheet : ^0.0.10
supports-color : ^3.2.3

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.

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-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].

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.


styled-theming - Create themes for your app using styled-components

  •    Javascript

<ThemeProvider> is part of styled-components, but is required for styled-theming. Most of your theming will be done with this function.

awesome-styled-components - A curated list of awesome styled-components resources πŸ’…

  •    

Please read the contribution guidelines before contributing. Contributions welcome and suggestions! Read the contribution guidelines first.

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-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.

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.

glamorous - πŸ’„ Maintainable CSS with React

  •    Javascript

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.You can find documentation and related examples here.

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.

vscode-styled-components - Syntax highlighting for styled-components

  •    Javascript

Syntax highlighting and IntelliSense for styled-components. Uses a CSS grammar built on top of language-sass and language-css.

vue-styled-components - Visual primitives for the component age

  •    Javascript

Do not use built-in or reserved HTML elements as component id (title, button, input...).

jest-styled-components - Jest utilities for Styled Components

  •    Javascript

A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules. Jest snapshot testing is an excellent way to test React components (or any serializable value) and make sure things don't change unexpectedly. It works with Styled Components but there are a few problems that this package addresses and solves.

styled-media-query - πŸ’…πŸ’ Better media queries for styled-component

  •    Javascript

Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints. Note: This documentation is for the latest version (v2). We still support v1 syntax but it'll be removed in v3.

decss - 🎨 Converts CSS modules into components πŸ‘©‍🎨

  •    Javascript

decss converts CSS modules into React/Preact components. Thanks to simple CSS class naming convention it generates enum and boolean props for the component automatically so you can keep your code clean and tidy. The runtime size is exactly 673 B.

coderplanets_web - the most sexiest community for developers, build with React, Mobx/MST, GraphQL, Styled-Components, Rxjs, Ramda

  •    Javascript

the most sexiest community for developers, build with React, Mobx/MST, GraphQL, Styled-Components, Rxjs, Ramda ... and ❀️

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.