Ecosystem

Built with styled-components

Components

• react-data-table-component
  • Data Table with built in sorting, pagination, selection, expandable rows and customizable styling.
• oah-ui
  • Component library built with four themes, grid system, ltr and rtl directions, theme system to add and edit themes
• react-styled-floating-label
  • Floating label component which works with any HTML input.
• grape-ui
  • Component library using styled-system and other open source components.
• styled-off-canvas
  • Simple one-off canvas menu.
• React95
  • Windows 95 style UI components.
• react-functional-select
  • Micro-sized & micro-optimized select component.
• 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 components for spinners.
• styled-react-modal
  • Modal component with familiar API and syntactic sugar.
• Smooth UI
  • UI Library / Design System.
• 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.
• react-microlink
  • Convert your links into beautiful previews.
• ReaKit
  • Toolkit for building interactive UIs.
• Rebass
  • Functional React UI component library.
• react-css-loaders
  • A collection of pure CSS loading components.
• react-simple-chatbot
  • Simple chatbot / conversational-ui component.
• reactour
  • Tourist Guide into your Components.
• uiGradients
  • Drop-in component for gradients.
• react-aria-tooltip
  • Accessible ReactJS tooltip component.
• grommet-icons
  • Iconography for grommet apps.

Grid Systems

• bedrock-layout-primitives
  • Foundational Layout Primitives for your React App
• Atomic Layout
  • Layout composition as a physical React component.
• react-raster
  • Advanced Grid-System, highly customizable and ready for SSR.
• react-flex-ready
  • FlexBox grid system with flex-gap property.
• Cinch Layout
  • React Native grid system inspired by Hedron.
• react-awesome-styled-grid
  • Responsive grid system layout.
• styled-bootstrap-grid
  • Twitter Bootstrap v4 (grid system only).
• neat-components
  • Implementation of ThoughtBot's Neat grid system.
• styled-css-grid
  • A tiny CSS grid layout.
• react-flexa
  • Implementing the flexbox CSS API responsively.
• react-styled-flexboxgrid
  • Grid system based on flexbox.
• Hedron
  • No-frills flex-box grid system.

Helpers

• MetaComponent
  • Migrate legacy HTML and CSS to styled components.
• styco
  • VS Code extension to easily refactor JSX inline styles to styled components.
• react-components-cli
  • Client to generate styled components.
• theme-miner
  • Makes it very easy and readable to create complex design systems in React with styled-components.
• styless
  • Style your components declaratively with familiar Less syntax.
• css-in-js-media
  • Deal with responsive design.
• spacing-helper
  • Standalone helper for creating consistent spacing between the elements.
• styled-components-extractor
  • Extracts unbound tags in VS Code.
• styled-media-helper
  • Write media queries.
• 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
• styled-email-components
  • Extension for building email-first components via inline styles.
• styled-breakpoints
  • Simple and powerful custom breakpoints
• styled-reboot
  • Bootstrap v4 reboot.css
• polished
  • Lightweight set of Sass/Compass-style mixins/helpers.
• styled-reset
  • Eric Meyer's Reset CSS.
• styled-transition-group
  • Create react-transition-group animations.
• shevyjs
  • 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).
• webstorm-styled-components
  • Highlighting support in IntelliJ editors
• styled-theming
  • Create themes for your app.
• styled-system
  • Design system utilities.
• styled-map
  • Super simple lib to map props to styles.
• styled-tools
  • Useful interpolated functions.

Testing

• jest-styled-components
  • Jest utilities.

Boilerplates

• styled-react-boilerplate
  • Modern & minimal boilerplate.
• 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.

Real Apps

• Earner
  • Your number one resource to the Finnish employment community.
• Nulogy
  • Supply chain management software built with open-source Nulogy Components.
• Nyxo iOS & Android App
  • Personalized sleep coaching mobile app.
• Vimeo
  • Video collaboration, video distribution and video everything else.
• Orbit Components
  • Component library of Orbit Design System, built by and for Kiwi.com
• PageXL
  • No code website builder to create landing pages and online stores in minutes.
• Taskade
  • The unified workspace for distributed teams. Real-time collaboration and organization tool.
• njt.now.sh
  • njt (npm jump to) is a tool and a service that provides package navigation shortcuts. It uses Next.js and involves server-side-rendering (source).
• Strapi Admin Panel
  • Strapi built-in admin panel to build content APIs.
• 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.
• The Players Tribune
  • The Voice of the Game
• 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 styled-components Happy Path
• 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.