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

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.
reas - Minimalist and highly customizable UI 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.
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

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.
grid-styled - Responsive grid system.

Helpers

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

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

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.

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.

edkf/awesome-styled-components