Awesome Styled Components

A collection of awesome styled-components resources 💅

Please read the contribution guidelines before contributing.

Contents

• styled-components
  • General Resources
  • Community
• Built with styled-components
  • Components
  • Grid Systems
  • Helpers
  • Testing
  • Boilerplates
• Real Apps
• Further Reading
  • Articles
  • Video from Confs
  • Video Tutorials
• Contribute
• License

---

styled-components

Use the best bits of ES6 and CSS to style your apps without stress 💅

General Resources

• Official Site
• GitHub

Community

• Spectrum
• StackOverflow

---

Built with styled-components

Components

• flymenu-reactjs - Off-canvas menu component.
• styled-off-canvas - Simple off canvas menu
• React95 - Windows 95 style UI components for your React app.
• react-functional-select - Micro-sized & micro-optimized select component for React.js.
• 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 - Drop in component for gradients.
• 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

• 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 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

• css-in-js-media - Easily deal with responsive design with this css-in-js-media.
• spacing-helper - Standalone helper for creating consistent spacing between the elements of your UI.
• 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 - 🔥 Simple and powerfull custom breakpoints 🔥
• 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

• 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.
• 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

Contributions welcome and suggestions! Read the contribution guidelines first.

---

License

To the extent possible under law, Romello Goodman has waived all copyright and related or neighboring rights to this work.