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

• 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

Contributions welcome and suggestions! Read the contribution guidelines first.

Archived

Here's a list of previous library links (without any category or grouping) that have been inactive without new releases for at least 12 months. This may include packages that have had commits that simply bump dependencies, without actually upgrading peer dependencies, or other changes.

• sugUI Components Library - A UI components library and design system template.
• react-awesome-notifications - A beautiful fully customizable React + Redux notification system built with styled-components.
• styled-bootstrap - Bootstrap 4 Components implementation with customization in mind.
• react-super-styled - Build responsive, semantic layouts fast with this design-agnostic 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.
• 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.
• last-draft - A Draft.js Editor.
• reshake - CSShake as a React Functional Component.
• react-teleportation - Teleport your components to the foreground.
• react-enhanced-form - form 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.
• animated-styled-component - React Animated Styled Components.
• 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-components-spacing - Responsive margin and padding components.
• griz - The simplest grid system you'd ever see. Using grids with a flexbox fallback.
• styled-components-grid - Responsive grid components.
• Rebass Grid - Responsive React grid system built with styled-system.
• super-query - Super media-query intuitive and easy of use.
• styled-container-query - Use Container Queries/Element Queries with an easy syntax.
• subatomic - Add inline style props to your styled components.
• 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
• normalized-styled-components - normalize.css with a styled-components mindset.
• styled-is - Flag utility for styled-components.
• styled-components-ts - styled-components for TypeScript
• 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-components-theme - Refers to theme colors and modifying them inline.
• styled-ax - Functional theme property accessor(s).
• 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.
• styled-components-test-utils - Utils for styled-components compatible with jest, expect, chai and jasmine
• ReactQL - Universal React + GraphQL starter kit written in Typescript w/ React 16, Apollo 2, SSR, hot-code reload, Brotli compression, strongly typed themes and support for SASS/LESS/PostCSS.
• RAN! - Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, and caching.
• Razzle Material UI Styled Example - Razzle Material UI example using Express with compression.
• react-redux-styled-hot-universal - SSR, Universal Webpack, Redux, React-router, Babel

License

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