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!

Built with styled-components

Components

styled-icons - Icons from popular icon packs (Font Awesome, Material, Octicons, etc).
@hackclub/design-system - Flexible, reusable set of web UI components, built by Hack Club
react-styled-select - Lightweight Select control component.
styled-bootstrap - Bootstrap 4 Components implementation with customization in mind.
react-microlink - Convert your links into beautiful previews.
react-super-styled - Build responsive, semantic layouts fast with this design-agnostic toolkit.
reas - Minimalist and highly customizable UI toolkit.
styled-flex-component - Flex Element for not writing any more custom flex styles.
styled-grid-component - Grid Element for not writing any more custom grid styles.
react-styled-flexbox - Effortlessly add flexbox styles to your components using minimal code.
Reactackle - Open-source component library built with React and Styled Components.
react-styled-box - Speed up 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 syntax 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 is fast to 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-grid-responsive - Responsive, fluid, deeply nestable, non-flexbox grid system with default or custom breakpoints.
styled-bootstrap-grid - Full Twitter Bootstrap v4 grid system (only) implementation.
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

with-styled-class-names - Tiny (666😈 bytes gzip size) helper function/high order component to help style custom classNames props like inputClassName, activeClassName etc. on 3rd party components using styled-components
styled-reset - Eric Meyer's Reset
styled-transition-group - Create react-transition-group animations with styled-components.
shevyjs - Easily create and manage global typography and vertical rhythm.
design-system-utils - Utilities to give better access to your design system.
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

React Starter Kit for Firebase - Real world React, GraphQL, Relay, Postgres setup for a serverless architecture (demo).
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 💅.
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

rick-morty-app - Rick and Morty Information Portal.
Hack Club - Website for a global, non-profit community of high school coding clubs (source)
Helsinki Food Guide - Website featuring only the best dishes in Helsinki.
Atlas of of Economic Complexity - Research and data visualization tool to explore global trade flows across markets, track these dynamics over time and discover new growth opportunities for every country.
Outline - Wiki for your team (source)
Count Minutes - Application helping you to be in control of your time.
GitPoint - GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
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).
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.

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.

Ecosystem

Built with styled-components

Components

Grid Systems

Helpers

Testing

Boilerplates

Real Apps

Further Reading

Articles

Video from Confs

Video Tutorials

Contribute