Ecosystem

Built with styled-components

Components

• Orbit Components
  • React components library of Orbit Design System, built by and for Kiwi.com
• sugUI Components Library
  • A UI components library and design system template.
• Grommet
  • Component library built with accessibility, modularity, responsiveness, and theming in mind.
• bootstrap-styled
  • Bootstrap 4 Components, mixins, utilities implementations with global sharing community ecosystem in mind.
• react-epic-spinners
  • Reusable react components for epic-spinners.
• react-awesome-notifications
  • A beautiful fully customizable React + Redux notification system built with styled-components.
• styled-react-modal
  • Modal component with familiar API and syntactic sugar for applying styles.
• Smooth UI
  • UI Library / Design System based on styled-components
• rendition
  • A powerful component library for quickly building modern web apps.
• 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.
• ReaKit
  • Toolkit for building interactive UIs with React and styled-components.
• 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

• Cinch Layout
  • React Native grid system inspired by Hedron.
• react-awesome-styled-grid
  • Responsive grid system layout for React.
• react-rasta
  • Responsive 12 column grid system which comes with a clean and simple API plus tons of feature -- customizable breakpoints, full screen mode, and no gutter to name a few.
• 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.
• Rebass Grid
  • Responsive React grid system built with styled-system.

Helpers

• super-query
  • Super media-query intuitive and easy of use.
• styled-container-query
  • Use Container Queries/Element Queries with an easy syntax.
• styled-components-extractor
  • Extracts unbound tags to styled-components in VS Code.
• styled-media-helper
  • Makes easy to write media queries using styled-components.
• styled-tachyons
  • Mix tachyons style shorthands with normal css.
• styled-px2vw
  • Extension of styled-components with features for convert px to vw units.
• styled-normalize
  • Add normalize.css with one line
• styled-email-components
  • Extension for building email-first components via inline styles.
• styled-breakpoints
  • :fire: Simple and powerfull custom breakpoints :fire:
• styled-reboot
  • Bootstrap v4 reboot.css
• subatomic
  • Add inline style props to your styled components.
• polished
  • Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
• 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 CSS for styled-components
• 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

• ReactQL
  • Universal React + GraphQL starter kit written in Typescript w/React 16, Apollo 2, Webpack 4, SSR, hot-code reload, Brotli compression, strongly typed SC themes and additional support for SASS/LESS/PostCSS.
• 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

• Jane
  • Daily deal site offering the latest trends in fashion and home decor.
• Sweetgreen Android App
  • Sweetgreen is an American fast casual restaurant chain that serves salads. It already using Styled Components for the React Native Android Application.
• WebGazer
  • Uptime monitoring and analytics service.
• Cloverleaf
  • Reveal insights on your team's hidden qualities.
• Moleskine
  • Moleskine Digital Studio.
• FortniteMaster.com
  • Professional Fortnite Battle Royale Stats.
• Prisma
  • Open-Source GraphQL ORM for GraphQL Servers (source).
• InVision
  • Digital product design, workflow & collaboration.
• TSM
  • Official TSM Site.
• Swipe Life
  • Tinder Swipe Life.
• Autodesk
  • Online CAD Editor & Viewer.
• Vogue
  • Fashion, Trends, Beauty and People.
• Spectrum
  • The community platform for the future (source).
• Casper
  • Better Sleep For All.
• Coinbase
  • Buy & Sell Bitcoin, Ethereum, and more with trust.
• Typeform
  • Turn data collection into an experience.
• Atlaskit
  • Atlaskit by Atlassian (source).
• ticketmaster.co.uk
  • Tickets for concerts, theatre, football, family days out.
• shop.lego.com
  • LEGO shop.
• Patreon
  • Best way for artists and creators to get sustainable income and connect with fans.
• Target
  • Expect More. Pay Less.
• Dutchie
  • Online Cannabis Ordering & Delivery.
• Tab Ipsum
  • Generate fake content easily (source).
• Booben
  • Design, develop, connect data, get source code - all in one place.
• React Native Explorer
  • Explorer React Native packages and examples effortlessly.
• Coinbase Pro
  • US based digital asset exchange with trading UI, FIX API and REST API.
• 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.

Further Reading

Articles

• The state of CSS, CSS in JS & how styled-components is solving the problems we’ve had for decades
• How styled-components works
• Getting Sassy with styled-components
• Writing Scalable React Apps with the Component Folder Pattern
• Building a Blog With Next.js and styled-components
• How to create responsive UI with styled-components
• How to build a simple HackerNews feed with styled-components
• Creating truly universal React component systems
• Ryan Florence - Ryan's Random Thoughts on Inline Styles
• Rendering Khan Academy’s Learn Menu Wherever I Please
• The Future of Reusable CSS
• "Scale" FUD and Style Components
• The magic behind 💅 styled-components

Video from Confs

• The road to styled components, and the road ahead - Glen Maddern, Front End Center
• ⚡️ - Max Stoiber - The Road to Styled Components - React Conf 2017
• ColdFront16 • Glenn Maddern: The Future of Reusable CSS

Video Tutorials

• Create a style guide using NPM & styled-components
• How to Use Styled Components in React Applications
• CSS in JavaScript

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.