awesome-styled-components

CSS-in-JS library collection

A curated collection of resources and libraries for styling React applications with CSS-in-JS

A curated list of awesome styled-components resources 💅

GitHub
3k stars
45 watching
281 forks
last commit: over 2 years ago
Linked from 1 awesome list

awesomeawesome-listcsscss-in-jsreactstyled-components

Awesome Styled Components / Contents / styled-components
Official Site
GitHub 40,570 about 1 year ago
Spectrum
StackOverflow

Awesome Styled Components / Contents / Built with styled-components
react-data-table-component 2,057 12 months ago Data Table with built in sorting, pagination, selection, expandable rows and customizable styling
oah-ui 209 over 4 years ago Component library built with four themes, grid system, ltr and rtl directions, theme system to add and edit themes
react-styled-floating-label 35 almost 3 years ago Floating label component which works with any HTML input
grape-ui 41 over 2 years ago Component library using styled-system and other open source components
styled-off-canvas 76 12 months ago Simple one-off canvas menu
React95 6,713 almost 2 years ago Windows 95 style UI components
react-functional-select 195 almost 3 years ago 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 335 almost 3 years ago Reusable components for spinners
styled-react-modal 213 11 months ago Modal component with familiar API and syntactic sugar
Smooth UI 1,590 over 3 years ago UI Library / Design System
rendition 214 about 1 year ago A powerful component library for quickly building modern web apps
styled-icons 2,094 over 1 year ago Icons from popular icon packs (Font Awesome, Material, Octicons, etc)
@hackclub/design-system 157 about 2 years ago Flexible, reusable set of web UI components, built by
react-styled-select 108 over 4 years ago Lightweight Select control component
react-microlink 588 over 1 year ago Convert your links into beautiful previews
ReaKit 7,926 11 months ago Toolkit for building interactive UIs
Rebass 7,941 over 2 years ago Functional React UI component library
react-css-loaders 396 almost 6 years ago A collection of pure CSS loading components
react-simple-chatbot 1,742 12 months ago Simple chatbot / conversational-ui component
reactour 3,859 about 1 year ago Tourist Guide into your Components
uiGradients 229 almost 6 years ago Drop-in component for gradients
react-aria-tooltip 57 almost 3 years ago Accessible ReactJS tooltip component
grommet-icons 334 11 months ago Iconography for grommet apps
bedrock-layout-primitives 444 11 months ago Foundational Layout Primitives for your React App
Atomic Layout 1,129 almost 3 years ago Layout composition as a physical React component
react-raster 80 over 3 years ago Advanced Grid-System, highly customizable and ready for SSR
react-flex-ready 60 over 3 years ago FlexBox grid system with property
Cinch Layout 23 almost 3 years ago React Native grid system inspired by Hedron
react-awesome-styled-grid 218 about 1 year ago Responsive grid system layout
styled-bootstrap-grid 167 almost 3 years ago Twitter Bootstrap v4 (grid system only)
neat-components 32 about 2 years ago Implementation of ThoughtBot's Neat grid system
styled-css-grid A tiny CSS grid layout
react-flexa 132 almost 3 years ago Implementing the flexbox CSS API responsively
react-styled-flexboxgrid 557 over 1 year ago Grid system based on flexbox
Hedron No-frills flex-box grid system
MetaComponent 37 about 5 years ago Migrate legacy HTML and CSS to styled components
styco 95 over 2 years ago VS Code extension to easily refactor JSX inline styles to styled components
react-components-cli 15 almost 3 years ago Client to generate styled components
theme-miner Makes it very easy and readable to create complex design systems in React with styled-components
styless 65 almost 3 years ago Style your components declaratively with familiar Less syntax
css-in-js-media 141 over 2 years ago Deal with responsive design
spacing-helper 46 over 2 years ago Standalone helper for creating consistent spacing between the elements
styled-components-extractor 27 12 months ago Extracts unbound tags in VS Code
styled-media-helper 76 over 2 years ago Write media queries
styled-tachyons 16 over 2 years ago Mix tachyons style shorthands with normal css
styled-px2vw 90 about 5 years ago Extension of styled-components with features for convert px to vw units
styled-normalize 447 over 1 year ago Add normalize.css
styled-email-components 257 almost 3 years ago Extension for building email-first components via inline styles
styled-breakpoints 554 11 months ago Simple and powerful custom breakpoints
styled-reboot 27 11 months ago Bootstrap v4 reboot.css
polished 7,637 about 1 year ago Lightweight set of Sass/Compass-style mixins/helpers
styled-reset 390 over 1 year ago Eric Meyer's Reset CSS
styled-transition-group 160 almost 3 years ago Create animations
shevyjs 317 almost 3 years ago Create and manage global typography and vertical rhythm
design-system-utils 539 over 5 years ago Utilities to give better access to your design system
styled-components-modifiers 297 over 2 years ago Enables BEM flavored modifiers (and responsive modifiers)
webstorm-styled-components 375 11 months ago Highlighting support in IntelliJ editors
styled-theming 1,169 about 4 years ago Create themes for your app
styled-system 7,872 almost 2 years ago Design system utilities
styled-map 592 over 3 years ago Super simple lib to map props to styles
styled-tools 802 almost 3 years ago Useful interpolated functions
jest-styled-components 1,585 over 1 year ago Jest utilities
styled-react-boilerplate 212 about 5 years ago Modern & minimal boilerplate
Generator create-redux-app 139 almost 3 years ago Adds Redux and other useful libraries, on top of create-react-app
Superstylin' 170 almost 3 years ago A Gatsby starter
react-boilerplate 29,490 over 2 years ago Highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices
ARc 2,917 over 3 years ago Atomic React App boilerplate

Awesome Styled Components / Contents / Real Apps
Earner Your number one resource to the Finnish employment community
Nulogy Supply chain management software built with open-source
Nyxo iOS & Android App Personalized sleep coaching mobile app
Vimeo Video collaboration, video distribution and video everything else
Orbit Components 1,391 11 months ago Component library of Orbit Design System, built by and for
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 (npm jump to) is a tool and a service that provides package navigation shortcuts. It uses Next.js and involves server-side-rendering ( )
Strapi Admin Panel 64,232 11 months ago 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 ( )
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 ( )
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 ( )
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 ( )
Booben 106 almost 7 years ago 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 13 almost 7 years ago Rick and Morty Information Portal
Hack Club Website for a global, non-profit community of high school coding clubs ( )
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 ( )
Count Minutes Application helping to be in control of time
GitPoint GitPoint is the most feature-rich unofficial GitHub client that is 100% free
en.kachkaev.ru Personal homepage built with ; also uses GraphQL, Docker, CI and microservice architecture ( )
WutTheLint Searchable catalog of linters
GetShitDone Timer to track your work tasks ( )
Swat.io Social Media Managment for Teams by
Grabient.com A beautiful and simple UI for generating web gradients. ( )
CodeSandbox An online editor tailored for React development ( )
rosesdaycare.center Marketing website with theme colors that change on refresh ( )
joeireland.com Portfolio of Joseph Ireland ( )
michaelhsu.tw A simple static homepage built with CRA pre-renderer ( )
Reactiflux Reactiflux community home build with ( )
Dirtyredz.com David McClain | Dirtyredz * About me, Latest projects and Contact ( )
sachagreif.com Personal homepage built with ( )
spaceexperience.club Brings you each day a stunning picture of our universe, Astronomy Picture of the Day. ( )
PostCSS.parts Searchable catalog of PostCSS plugins

Awesome Styled Components / Contents / Further Reading
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
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
Create a style guide using NPM & styled-components
How to Use Styled Components in React Applications
CSS in JavaScript

Awesome Styled Components / Contents / Archived
sugUI Components Library 18 over 6 years ago A UI components library and design system template
react-awesome-notifications 29 almost 7 years ago A beautiful fully customizable React + Redux notification system built with styled-components
styled-bootstrap 155 over 6 years ago Bootstrap 4 Components implementation with customization in mind
react-super-styled 79 almost 7 years ago Build responsive, semantic layouts fast with this design-agnostic toolkit
styled-flex-component 209 over 4 years ago Flex Element for not writing any more custom flex styles
styled-grid-component 23 about 6 years ago Grid Element for not writing any more custom grid styles
react-styled-flexbox 30 about 7 years ago Effortlessly add flexbox styles to your components using minimal code
Reactackle 279 almost 3 years ago Open-source component library built with React and Styled Components
react-styled-box 40 almost 7 years ago Speed up prototyping layouts with ready flex powered Box
styled-loaders 208 about 5 years ago Loaders Built with Preact and Styled Components
colors-show 26 over 8 years ago Present your application colors with style
react-adminlte-dash 167 almost 7 years ago AdminLTE dashboard components in React
react-presents Highly customizable React slideshow framework with syntax highlighting and mobile support
react-progressive-bg-image 227 11 months ago Medium style progressive background image
mcs-lite-ui 75 about 1 year ago An on-premises Internet of Things cloud platform, which can be quickly built and is fast to get started with
last-draft 218 over 7 years ago A Draft.js Editor
reshake 275 over 2 years ago CSShake as a React Functional Component
react-teleportation 96 almost 7 years ago Teleport your components to the foreground
react-enhanced-form 133 almost 7 years ago form component
react-create-component-from-tag-prop 18 over 7 years ago Create a React component from a tag prop. Lets your users to choose which HTML elements get styled
animated-styled-component 139 almost 3 years ago React Animated Styled Components
react-rasta 91 almost 3 years ago 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 26 over 7 years ago Responsive, fluid, deeply nestable, non-flexbox grid system with default or custom breakpoints
styled-components-spacing 213 almost 3 years ago Responsive margin and padding components
griz 103 about 7 years ago The simplest grid system you'd ever see. Using grids with a flexbox fallback
styled-components-grid 220 over 2 years ago Responsive grid components
Rebass Grid 2,039 about 6 years ago Responsive React grid system built with styled-system
super-query 30 almost 3 years ago Super media-query intuitive and easy of use
styled-container-query 52 almost 3 years ago Use / with an easy syntax
subatomic 61 almost 7 years ago Add inline style props to your styled components
with-styled-class-names 28 almost 8 years ago Tiny (666 bytes gzip size) helper function/high order component to help style custom classNames props like , etc. on 3rd party components using
normalized-styled-components 50 almost 3 years ago normalize.css with a styled-components mindset
styled-is 210 almost 3 years ago Flag utility for styled-components
styled-components-ts 150 almost 7 years ago styled-components for TypeScript
styled-by 134 over 3 years ago Simple and powerful lib to handle styled props
styled-media-query Easily and beautifully use media queries with custom breakpoints,
styled-shortcut-components 13 almost 4 years ago A convenience package that wraps with
styled-shortcuts 88 over 7 years ago Use simple string notation to access props. No functions necessary
styled-components-theme 305 almost 6 years ago Refers to theme colors and modifying them inline
styled-ax 23 over 8 years ago Functional theme property accessor(s)
styled-theme 181 almost 8 years ago Extensible theming system
styled-components-breakpoint 243 about 4 years ago Utility function for using breakpoints
styled-props 241 about 6 years ago Allows you to set styled props in your styled-components without stress
styled-components-test-utils 46 about 1 year ago Utils for styled-components compatible with jest, expect, chai and jasmine
ReactQL 1,818 about 1 year ago 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! 2,216 11 months ago Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, and caching
Razzle Material UI Styled Example 114 11 months ago Razzle Material UI example using Express with compression
react-redux-styled-hot-universal 146 over 8 years ago SSR, Universal Webpack, Redux, React-router, Babel

Backlinks from these awesome lists:

More related projects: