A collection of awesome styled-components resources 💅
Please read the contribution guidelines before contributing.
Use the best bits of ES6 and CSS to style your apps without stress 💅
- react-styled-box - Speedup 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 syntaxt 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 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.
- 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.
- 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-componentswithstyled-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.
- jest-styled-components - Jest utilities for Styled Components
- styled-components-test-utils - Utils for styled-components compatible with jest, expect, chai and jasmine
- 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 💅.
- Scalable React TypeScript Boilerplate
- Scalable React Boilerplate
- 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.
- 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).
- ismaywolff.nl - personal portfolio with serverside rendering (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.
- 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
- 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
Contributions welcome and suggestions! Read the contribution guidelines first.
To the extent possible under law, Romello Goodman has waived all copyright and related or neighboring rights to this work.