A collection of awesome styled-components resources 💅
Please read the contribution guidelines before contributing.
Use the best bits of ES6 and CSS to style your apps without stress 💅
- react-redux-styled-hot-universal - SSR, Universal Webpack, Redux, React-router, Babel, Styled Components and more.
- ARc - Atomic React App boilerplate.
- react-boilerplate - Highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
- Scalable React Boilerplate
- Scalable React TypeScript Boilerplate
- Superstylin' - A Gatsby starter 💅.
- Generator create-redux-app - Adds Redux and other useful libraries, on top of create-react-app.
- Razzle Material UI Styled Example - Razzle Material UI example with Styled Components using Express with compression.
- animated-styled-component - React Animated Styled Components.
- grommet-icons - Iconography for grommet apps.
- react-create-component-from-tag-prop - Create a react component from a tag prop. Lets your users to choose which HTML elements get styled.
- react-aria-tooltip - Accessible ReactJS tooltip component.
- uiGradients - Generate beautiful background gradients from the uigradients.com database.
- react-enhanced-form - The best react form component, on earth 🌍.
- react-teleportation - Teleport your components to the foreground.
- reshake - CSShake as a React Functional Component.
- last-draft - A Draft.js Editor.
- reactour - Tourist Guide into your React Components.
- mcs-lite-ui - An on-premises Internet of Things cloud platform, which can be quickly built and get started with.
- react-progressive-bg-image - Medium style progressive background image.
- react-simple-chatbot - Simple chatbot / conversational-ui React component.
- react-css-loaders - A collection of pure CSS React loading components.
- Rebass - Functional React UI component library.
- react-presents - Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
- react-adminlte-dash - AdminLTE dashboard components in React.
- colors-show - Present your application colors with style.
- grid-styled - Responsive grid system.
- Hedron - No-frills flex-box grid system.
- styled-components-grid - Responsive grid components.
- react-styled-flexboxgrid - Grid system based on Flexbox.
- react-flexa - Implementing the flexbox CSS API responsively.
- griz - The simplest grid system you'd ever see. Using grids with a flexbox fallback.
- styled-css-grid - A tiny CSS grid layout for React.
- neat-components - Implementation of ThoughtBot's Neat grid system.
- styled-components-spacing - Responsive margin and padding components.
- styled-props - Allows you to set styled props in your styled-components without stress.
- styled-components-breakpoint - Utility function for using breakpoints.
- styled-theme - Extensible theming system.
- styled-tools - Useful interpolated functions.
- styled-ax - Functional theme property accessor(s).
- styled-components-theme - Refers to theme colors and modifying them inline.
- styled-map - Super simple lib to map props to styles.
- styled-system - Design system utilities.
- styled-shortcuts - Use simple string notation to access props. No functions necessary.
- styled-shortcut-components - A convenience package that wraps
styled-componentswithstyled-shortcuts. - styled-media-query - Easily and beautifully use media queries with custom breakpoints,
- styled-by - Simple and powerful lib to handle styled props.
- styled-theming - Create themes for your app.
- styled-components-ts - styled-components for typeScript
- webstorm-styled-components - Highlighting support in IntelliJ editors
- styled-is - Flag utility for styled-components.
- normalized-styled-components - normalize.css with a styled-components mindset.
- styled-components-test-utils - Utils for styled-components compatible with jest, expect, chai and jasmine
- jest-styled-components - Jest utilities for Styled Components
- PostCSS.parts - Searchable catalog of PostCSS plugins.
- spaceexperience.club - Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. (source).
- sachagreif.com - Personal homepage built with Gatsby (source).
- ismaywolff.nl - personal portfolio with serverside rendering (source).
- Dirtyredz.com - David McClain | Dirtyredz * About me, Latest projects and Contact (source).
- Reactiflux - Reactiflux community home build with Gatsby (source).
- michaelhsu.tw - A simple static homepage built with CRA pre-renderer (source).
- joeireland.com - Portfolio of Joseph Ireland (source).
- rosesdaycare.center - Marketing website with theme colors that change on refresh (source).
- CodeSandbox - An online editor tailored for React development (source).
- Grabient.com - A beautiful and simple UI for generating web gradients. (source).
- The magic behind 💅 styled-components
- "Scale" FUD and Style Components
- The Future of Reusable CSS
- Rendering Khan Academy’s Learn Menu Wherever I Please
- Ryan Florence - Ryan's Random Thoughts on Inline Styles
- https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
- Creating truly universal React component systems
- How to build a simple HackerNews feed with styled-components
- How to create responsive UI with styled-components
- Building a Blog With Next.js and styled-components
- Writing Scalable React Apps with the Component Folder Pattern
- Getting Sassy with styled-components
- ColdFront16 • Glenn Maddern: The Future of Reusable CSS
- ⚡️ - Max Stoiber - The Road to Styled Components - React Conf 2017
- The road to styled components, and the road ahead - Glen Maddern, Front End Center
Contributions welcome and suggestions! Read the contribution guidelines first.
To the extent possible under law, Romello Goodman has waived all copyright and related or neighboring rights to this work.