Open-source projects categorized as styled-components | Edit details

Top 23 styled-component Open-Source Projects

  • GitHub repo styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: Everything you need to know about Styled Components | dev.to | 2021-05-03

    As you can see, it's actually pretty easy to understand and start using styled-components in your React applications. There are cool features that can help us to custom our component the way we want, make some dynamic styling using props, creating a theme and so on. So I would encourage you to dive into the documentation and try it out on your projects.

  • GitHub repo react-boilerplate

    :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

    Project mention: Isolated javascript development environment / 2021 | dev.to | 2021-04-06

    As an example, let's try to run this basic React-based app inside every environment and see how it goes. I have picked this one because it doesn't require a specific CLI to run it.

  • GitHub repo spectrum

    Simple, powerful online communities.

    Project mention: Sqwok.im adds support for markdown, bug fixes, ui enhancements, and more. | reddit.com/r/RedditAlternatives | 2021-04-23

    another spectrum.chat ripoff? Beat it.

  • GitHub repo css.gg

    700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

    Project mention: CSS.GG - 2.0 - 700 UI Icons in CSS, SVG & Figma | reddit.com/r/FigmaDesign | 2021-04-24
  • GitHub repo rebass

    :atom_symbol: React primitive UI components built with styled-system.

    Project mention: 15 Free ReactJS Templates for Your Next Project | dev.to | 2021-04-14

    TRebass is a primitive UI component built with styled-system. It is known to be one of the best React component libs out there. It is responsive, supports styled-components, flexbox, and more. See it's Live Demo

  • GitHub repo styled-system

    ⬢ Style props for rapid UI development

    Project mention: tizz - twitch viewership metrics FE + API built with next.js, express, postgres | reddit.com/r/reactjs | 2021-04-04

    I think you'd really enjoy Styled System after reading your remarks on styled components. They go great together and solve the problems you are talking about.

  • GitHub repo twin.macro

    🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.

    Project mention: Tailwind, styled components or good way to combine them? | reddit.com/r/reactjs | 2021-05-09

    There was a discussion about JIT here and it seems like twin.macro is going to add some built-in JIT equivalent features. Hope you find what you're looking for!

  • GitHub repo reactour

    Tourist Guide into your React Components

    Project mention: Create a guided tour plugin in the admin panel | dev.to | 2021-02-22

    In this tutorial I will show you how to create your own plugin on Strapi (version 3.4.6) and more precisely how to use reactour to create a guided tour which can be very useful for content managers out there who will have to master Strapi's admin to manage their content.

  • GitHub repo goober

    🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API

    Project mention: Show HN: Goober.rocks | news.ycombinator.com | 2021-03-20
  • GitHub repo React95

    A React components library with Win95 UI

    Project mention: Using Google Sheets as a simple database with Papa Parse | dev.to | 2021-03-15

    One of the first results was React95 and the first link inside the showcase was a recipe app from one of the library's contributors. The readme stated it used Google Sheets as a database, which I found interesting and decided to investigate further.

  • GitHub repo netflix

    Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

    Project mention: Weekly Developer Roundup #16 - Sun Oct 04 2020 | dev.to | 2020-10-03

    karlhadwen/netflix (JavaScript): Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

  • GitHub repo react-boilerplate-cra-template

    :fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.

    Project mention: 🚀10 Trending projects on GitHub for web developers - 15th January 2021 | dev.to | 2021-01-15

    react-boilerplate / react-boilerplate-cra-template

  • GitHub repo babel-plugin-styled-components

    Improve the debugging experience and add server-side rendering support to styled-components

    Project mention: Converting from Styled Components to Material-UI: Can Material use `withStyles()` on a div? | reddit.com/r/reactjs | 2021-03-11
  • GitHub repo hedron

    A no-frills flexbox grid system for React, powered by styled-components.

  • GitHub repo kotlin-wrappers

    Kotlin wrappers for popular JavaScript libraries

    Project mention: KotlinJS and State Hooks | dev.to | 2021-03-09

    useState part of React Hooks for state management is something that even Javascript and Typescript engineers struggle with from time to time. We are going to reduce this struggle within the React ecosystem using KotlinJS and the ever incredible Kotlin-React library.

  • GitHub repo orbit-components

    React components of open-source Orbit design system by Kiwi.com (by kiwicom)

  • GitHub repo design-system

    Priceline.com Design System

    Project mention: 5 Underrated React Design Systems for 2021 | dev.to | 2021-02-18


  • GitHub repo hls-downloader-web-extension

    Web Extension for sniffing and downloading HTTP Live streams (HLS)

    Project mention: mycourses videos buffering | reddit.com/r/rit | 2021-04-24

    Use this extension to download them, if there is no button to do so: https://chrome.google.com/webstore/detail/hls-downloader/apomkbibleomoihlhhdbeghnfioffbej

  • GitHub repo react-stripe-menu

    A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit

    Project mention: how to do the stripe site dropdown? | reddit.com/r/web_design | 2020-12-24

    Check this out: https://github.com/aholachek/react-stripe-menu

  • GitHub repo styled-ppx

    Typed styled components in Reason, OCaml and ReScript

  • GitHub repo aragon-ui

    🦚 UI kit for decentralized apps

    Project mention: Daily General Discussion - January 28, 2021 | reddit.com/r/ethfinance | 2021-01-27

    aragonUI v0.30 gets released, featuring the new IdentityBadge.

  • GitHub repo twin.examples

    Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.

    Project mention: How to setup create-react-app twin.macro and emotion | dev.to | 2021-03-29

    You can pretty much follow all the steps from this tutorial, until this point where it tells you to extend JSX with a jsx-pragma in front of every twin.macro import. The documentation underneath says the following:

  • GitHub repo gatsby-admin-template

    Free admin dashboard template based on Gatsby with @paljs/ui component package

    Project mention: Free React dashboard templates and themes | dev.to | 2021-05-06

    Live Demo / Download

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-05-09.


What are some of the best open-source styled-component projects? This list will help you:

Project Stars
1 styled-components 33,486
2 react-boilerplate 27,352
3 spectrum 9,812
4 css.gg 7,466
5 rebass 7,277
6 styled-system 6,715
7 twin.macro 3,994
8 reactour 2,314
9 goober 1,958
10 React95 1,575
11 netflix 1,387
12 react-boilerplate-cra-template 937
13 babel-plugin-styled-components 896
14 hedron 850
15 kotlin-wrappers 805
16 orbit-components 795
17 design-system 617
18 hls-downloader-web-extension 548
19 react-stripe-menu 361
20 styled-ppx 256
21 aragon-ui 252
22 twin.examples 148
23 gatsby-admin-template 147