Awesome Styled Components

A collection of awesome styled-components resources 💅

Please read the contribution guidelines before contributing.

styled-components
- General Resources
- Community
Built with styled-components
Real Apps
Further Reading
Contribute
License

styled-components

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

General Resources

Community

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.
React95 - Windows 95 style UI components.
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.
rendition - A powerful component library for quickly building modern web apps.
styled-icons - Icons from popular icon packs (Font Awesome, Material, Octicons, etc).
react-microlink - Convert your links into beautiful previews.
ReaKit - Toolkit for building interactive UIs.
Rebass - Functional React UI component library.
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

react-awesome-styled-grid - Responsive grid system layout.
styled-bootstrap-grid - Twitter Bootstrap v4 (grid system only).
styled-css-grid - A tiny CSS grid layout.

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.

License

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

joeltonmats/awesome-styled-components

Awesome Styled Components

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

License