Top 23 JavaScript styled-component Projects
-
react-boilerplate
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
-
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
Project mention: [Gatsby] - This was my first Gatsby project | reddit.com/r/reviewmycode | 2021-11-15
There's absolutely nothing wrong with using CSS mixed with your components, but I would suggest (if you haven't already) looking into some alternatives, such as styled-components or Rebass. Not because one is "better" than the other, but it's something to add to your arsenal
-
You can read more about styled system here, https://styled-system.com/.
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Project mention: What's your preferred way to use Tailwind with React? | reddit.com/r/tailwindcss | 2021-11-29Do you write "vanilla" TailwindCSS or do you use something like twin.macro?
-
Project mention: WinBox - a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source | reddit.com/r/programming | 2021-10-17
We've had React95 for a while.
-
react-firebase-starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
GitHub
-
-
Project mention: Please review my first portfolio website and give me some advice :) | reddit.com/r/Frontend | 2021-11-06
Not trying to throw any shade at OP but the layout/style OP is using is from the portfolio of Brittany Chang. One of the best portfolios I have even seen. Here is the link to her portfolio which is also available in GitHub. How do I know all this? Because my current personal website which I have made is also heavily inspired by her portfolio.
-
Project mention: Zero runtime CSS-in-JS : Is this where great DX meets top-notch Web Performance? (sharing our experience) | reddit.com/r/reactjs | 2021-11-19
Consider adding Goober too to the mix.
-
netflix
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React
-
-
babel-plugin-styled-components
Improve the debugging experience and add server-side rendering support to styled-components
Unfortunately, one thing keeps me from fully migrating to SWC: it replaces Babel, but it seems to have no alternative for babel-plugin-styled-components, which is crucial for my work (I use server-side rendering for styles and want to have readable names for debugging).
-
-
Github
-
react-stripe-menu
A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit
You're correct. I believe the real implementation uses the flip-move technique. This user reproduced it more accurately, but with React: https://github.com/aholachek/react-stripe-menu
-
Project mention: Need help with building a snowpack react project | reddit.com/r/reactjs | 2021-07-27
Sorting Visualizer
-
aragonUI v0.30 gets released, featuring the new IdentityBadge.
-
⭐ The open source section : mouadziani and smakosh
-
theme-builder
The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.
atapas / theme-builder
-
react-styled-select
A Select control built with Reactjs, styled-components and :heart: http://agutoli.github.io/
-
Project mention: Slate – A completely customizable framework for building rich text editors | news.ycombinator.com | 2021-07-29
That's my experience. I own a fork of Slate and Slate plugins that I've been doing my best to maintain, as well as a wrapper: https://github.com/roast-cms/french-press-editor. My project is small enough not to have bandwidth to upgrade Slate or switch to another editor but popular enough to keep alive and maintain two years past the version release I solidified. The implementation I have isn't very buggy, I've used it almost every day and have over a hundred users who successfully used it as well. There was only one time when a serious bug surfaced, the rest being minor inconveniences. This is the implementation: https://www.analog.cafe/write/draft
-
JavaScript styled-components related posts
- [Gatsby] - This was my first Gatsby project
- You should use forums rather than Slack/Discord to support developer community
- Hacktoberfest - Working with React
- WinBox - a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source
- Junior devs, what's your general struggle right now? Let's get you some advice!
- Giving Super-Powers to your Web Components
- Quiz App with API
Index
What are some of the best open-source styled-component projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | react-boilerplate | 28,108 |
| 2 | spectrum | 10,286 |
| 3 | rebass | 7,551 |
| 4 | styled-system | 7,111 |
| 5 | twin.macro | 5,029 |
| 6 | React95 | 4,856 |
| 7 | react-firebase-starter | 4,365 |
| 8 | v4 | 4,046 |
| 9 | goober | 2,262 |
| 10 | netflix | 1,727 |
| 11 | orbit-components | 1,124 |
| 12 | babel-plugin-styled-components | 962 |
| 13 | hedron | 852 |
| 14 | design-system | 643 |
| 15 | react-stripe-menu | 432 |
| 16 | sorting-visualizer | 302 |
| 17 | aragon-ui | 285 |
| 18 | smakosh.com | 222 |
| 19 | fakebooker-frontend | 143 |
| 20 | theme-builder | 117 |
| 21 | react-styled-select | 107 |
| 22 | french-press-editor | 72 |
| 23 | eleventy-react | 62 |
Are you hiring? Post a new remote job listing for free.
