Ecosystem

This is an incomplete list of awesome things built with styled-components. If you have something to share, please add it to the awesome-styled-components repo on GitHub and it will automatically show up here!

Components

react-styled-box - Speedup prototyping layouts with ready flex powered Box.
styled-loaders - Loaders Built with Preact and Styled Components.
colors-show - Present your application colors with style.
react-adminlte-dash - AdminLTE dashboard components in React.
react-presents - Highly customizable React slideshow framework with syntaxt highlighting and mobile support.
Rebass - Functional React UI component library.
react-css-loaders - A collection of pure CSS React loading components.
react-simple-chatbot - Simple chatbot / conversational-ui React component.
react-progressive-bg-image - Medium style progressive background image.
mcs-lite-ui - An on-premises Internet of Things cloud platform, which can be quickly built and get started with.
reactour - Tourist Guide into your React Components.
last-draft - A Draft.js Editor.
reshake - CSShake as a React Functional Component.
react-teleportation - Teleport your components to the foreground.
react-enhanced-form - The best react form component, on earth 🌍.
uiGradients - Generate beautiful background gradients from the uigradients.com database.
react-aria-tooltip - Accessible ReactJS tooltip component.
react-create-component-from-tag-prop - Create a react component from a tag prop. Lets your users to choose which HTML elements get styled.
grommet-icons - Iconography for grommet apps.
animated-styled-component - React Animated Styled Components.

Grid Systems

styled-components-spacing - Responsive margin and padding components.
neat-components - Implementation of ThoughtBot's Neat grid system.
styled-css-grid - A tiny CSS grid layout for React.
griz - The simplest grid system you'd ever see. Using grids with a flexbox fallback.
react-flexa - Implementing the flexbox CSS API responsively.
react-styled-flexboxgrid - Grid system based on Flexbox.
styled-components-grid - Responsive grid components.
Hedron - No-frills flex-box grid system.
grid-styled - Responsive grid system.

Helpers

styled-components-modifiers - Enables BEM flavored modifiers (and responsive modifiers).
normalized-styled-components - normalize.css with a styled-components mindset.
styled-is - Flag utility for styled-components.
webstorm-styled-components - Highlighting support in IntelliJ editors
styled-components-ts - styled-components for typeScript
styled-theming - Create themes for your app.
styled-by - Simple and powerful lib to handle styled props.
styled-media-query - Easily and beautifully use media queries with custom breakpoints,
styled-shortcut-components - A convenience package that wraps styled-components with styled-shortcuts.
styled-shortcuts - Use simple string notation to access props. No functions necessary.
styled-system - Design system utilities.
styled-map - Super simple lib to map props to styles.
styled-components-theme - Refers to theme colors and modifying them inline.
styled-ax - Functional theme property accessor(s).
styled-tools - Useful interpolated functions.
styled-theme - Extensible theming system.
styled-components-breakpoint - Utility function for using breakpoints.
styled-props - Allows you to set styled props in your styled-components without stress.

Testing

jest-styled-components - Jest utilities for Styled Components
styled-components-test-utils - Utils for styled-components compatible with jest, expect, chai and jasmine

Boilerplates

RAN! - Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, CSS-in-JS, caching, and more.
Razzle Material UI Styled Example - Razzle Material UI example with Styled Components using Express with compression.
Generator create-redux-app - Adds Redux and other useful libraries, on top of create-react-app.
Superstylin' - A Gatsby starter 💅.
Scalable React TypeScript Boilerplate
Scalable React Boilerplate
react-boilerplate - Highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
ARc - Atomic React App boilerplate.
react-redux-styled-hot-universal - SSR, Universal Webpack, Redux, React-router, Babel, Styled Components and more.

Real Apps

en.kachkaev.ru - Personal homepage built with next.js; also uses GraphQL, Docker, CI and microservice architecture (source on GitLab).
WutTheLint - Searchable catalog of linters.
GetShitDone - Timer to track your work tasks (source).
Swat.io - Social Media Managment for Teams by Die Socialisten
Grabient.com - A beautiful and simple UI for generating web gradients. (source).
CodeSandbox - An online editor tailored for React development (source).
rosesdaycare.center - Marketing website with theme colors that change on refresh (source).
joeireland.com - Portfolio of Joseph Ireland (source).
michaelhsu.tw - A simple static homepage built with CRA pre-renderer (source).
Reactiflux - Reactiflux community home build with Gatsby (source).
Dirtyredz.com - David McClain | Dirtyredz * About me, Latest projects and Contact (source).
ismaywolff.nl - personal portfolio with serverside rendering (source).
sachagreif.com - Personal homepage built with Gatsby (source).
spaceexperience.club - Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. (source).
PostCSS.parts - Searchable catalog of PostCSS plugins.

Articles

Video from Confs

Video Tutorials

Create a style guide using NPM & styled-components

Contribute

If you know any projects build with styled components contributions and suggestions are always welcome ! Please read the contribution guidelines first and submit a PR.