With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js. Learn more →
Top 23 css-in-j Open-Source Projects
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
In 2023, I had a chat with Max Stoiber, CEO of Stellate, on a podcast to learn about his early success on GitHub. His first open-source project, react-boilerplate/react-boilerplate, gained a whopping 10k stars in just one weekend after appearing on the homepage of Hacker News. This success led Max to drop out of university and create several other popular open-source projects, including styled-components. This library accelerates the process of building styles in React components.
-
maybe https://necolas.github.io/react-native-web/? https://github.com/vercel/next.js/blob/canary/examples/with-react-native-web/README.md
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Project mention: Creating Nx Workspace with Eslint, Prettier and Husky Configuration | dev.to | 2024-03-25
emotion [ https://emotion.sh ]
-
Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07
The code duplication occurred due to disabling the default code splitting algorithm in Next.js. Previous developers used this approach to make Linaria work, which is designed to improve productivity. However, disabling code splitting led to a decrease in performance.
-
Another common way to extend configs in linters is using the extends key in the configuration file. Let's take StyleLint as an example:
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:
-
KumaUI : Another relatively new contender, Kuma uses zero runtime CSS-in-JS to create headless UI components which allows a lot of flexibility. It was heavily inspired by other zero runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as by Styled System, ChakraUI, and Native Base. ### Vue
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
-
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
-
Project mention: Creating Nx Workspace with Eslint, Prettier and Husky Configuration | dev.to | 2024-03-25
-
Most websites those days are SPA applications that render on the front-side. There is also this trend of CSS in JavaScript also knowns as JSS that is debatable (makes everything overcomplicated), but in some specific cases, can be justified and very useful.
-
-
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
-
-
-
-
-
-
-
-
Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system.
jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working.
Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda.
-
-
react-with-styles
Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
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 2024-04-10.
css-in-js related posts
- Growth Hacking Killed GitHub Stars
- Creating Nx Workspace with Eslint, Prettier and Husky Configuration
- Panda CSS: build time and type-safe CSS-in-JS
- Tamagui – UI kit that unify React Native and Web
- How we improved page load speed for Next.js ecommerce website by 1.5 times
- Real-Time Top Reference System (Design Systems and UI Libs) 2023
- CSS Solves Auto-Expanding Textareas
-
A note from our sponsor - SurveyJS
surveyjs.io | 18 Apr 2024
Index
What are some of the best open-source css-in-j projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | styled-components | 40,042 |
| 2 | react-native-web | 21,326 |
| 3 | emotion | 17,163 |
| 4 | linaria | 11,155 |
| 5 | stylelint | 10,808 |
| 6 | tamagui | 9,915 |
| 7 | styled-system | 7,804 |
| 8 | twin.macro | 7,798 |
| 9 | stitches | 7,689 |
| 10 | styled-jsx | 7,608 |
| 11 | JSS | 7,050 |
| 12 | css-in-js | 5,532 |
| 13 | Aphrodite | 5,337 |
| 14 | panda | 4,647 |
| 15 | typography | 3,806 |
| 16 | twind | 3,683 |
| 17 | styletron | 3,322 |
| 18 | typestyle | 3,047 |
| 19 | goober | 3,030 |
| 20 | Fela | 2,259 |
| 21 | jsxstyle | 2,105 |
| 22 | compiled | 1,957 |
| 23 | react-with-styles | 1,697 |
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com