JavaScript css-in-js

Open-source JavaScript projects categorized as css-in-js | Edit details

Top 22 JavaScript css-in-j Projects

  • GitHub repo react-native-web

    React Native Components and APIs for the Web

    Project mention: Running React Native everywhere | reddit.com/r/reactjs | 2021-10-03

    You mean necolas ? As far as I know, he's a Twitter engineer. But yeah, it's a fantastic project :)

  • GitHub repo emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    Project mention: A 55% Performance Improvement Upgrading Material-UI from v4 to v5 | dev.to | 2021-10-14

    This was the biggest chunk of work for us. We've gone through a styling change before with Material-UI when they moved from inline styles to JSS, but this time Material-UI 5 moves away from JSS as the default styling solution to emotion. We've been relying heavily on JSS for the majority of our components, so lots of them looked something like this...

  • Syncfusion

    Syncfusion - See why our products are consistently getting 4.6 out of 5 stars by your peers.. Syncfusion Essential Studio for JavaScript is a modern UI control library built from the ground up to be lightweight, responsive, modular, and touch-friendly.

  • GitHub repo stylelint

    A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

    Project mention: When doing an @import to include external CSS, do the imports have to be before any other CSS? | reddit.com/r/css | 2021-09-07
  • GitHub repo styled-system

    ⬢ Style props for rapid UI development

    Project mention: Giving Super-Powers to your Web Components | dev.to | 2021-10-11

    The real inspiration for this library came from styled-system. Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.

  • GitHub repo styled-jsx

    Full CSS support for JSX without compromises

    Project mention: Using Nx Workspace generators to scaffold new blog posts | dev.to | 2021-10-12

    "style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" } ] } }, ...

  • GitHub repo JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.

    Project mention: What is CSS in JS? | dev.to | 2021-09-17

    JSS

  • GitHub repo Aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

    Project mention: 18 Alternatives to Using Tailwind CSS: Do You Really Need It? | dev.to | 2021-05-08

    ✨ css loader 💥 jss 🌟 csjs ☄️ aphrodite

  • 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.

  • GitHub repo 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: Tailwind extension suggestion | reddit.com/r/reactjs | 2021-09-29

    Good idea about the extension. I think there’s another tool that could also help you with that called twin macro. It combines css-in-js with tailwind. You can choose emotion or styled-components as your css library. This way you can create css components aside where there’s lots of styling and maybe conditional styling. It’s also much more performant than tailwind

  • GitHub repo stitches

    CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

    Project mention: Decent CSS-in-JS libraries for React Native? | reddit.com/r/reactnative | 2021-10-14

    No hate to Styled Components, but I've become quite fond of libraries like Stitches and Vanilla Extract CSS with my React projects. So I'm wondering if there are any similar ones for RN?

  • GitHub repo typography

    A powerful toolkit for building websites with beautiful design

    Project mention: Typography.js installation workflow | reddit.com/r/reactjs | 2021-04-16
  • GitHub repo styletron

    :zap: Toolkit for component-oriented styling

    Project mention: 5 React.js UI Component libraries. | dev.to | 2021-08-11

    It is created, managed, and utilized by Uber. It includes a wide range of attractive components, with accessibility as the top focus. It is quick since it is built with the Styletron engine. Style overrides can be used to tweak themes, but in my experience, I've never required them because the design vibe they're trying for is precisely what I want.

  • 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 Fela

    State-Driven Styling in JavaScript

  • GitHub repo vue-styled-components

    Visual primitives for the component age. A simple port for Vue of styled-components 💅

    Project mention: Dynamic styling in Vue.js | dev.to | 2021-10-11

    Styled-components is a famous CSS-in-JS library used especially by React developers...and you can use it with Vue.js too 😉. You can find the package here, please note that it's compatible only with Vue 2.x. Install the package (using yarn as the package manager):

  • GitHub repo design-system

    Priceline.com Design System

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

    Github

  • GitHub repo babel-plugin-tailwind-components

    Use Tailwind with any CSS-in-JS library

  • GitHub repo torus

    Torus is an event-driven model-view UI framework for the web, focused on being tiny, efficient, and free of dependencies. (by thesephist)

    Project mention: Ask HN: What are some tools / libraries you built yourself? | news.ycombinator.com | 2021-05-16

    At this point I've made a habit out of building homebrew tools and languages. Very few of these are purely because I was dissatisfied with off-the-shelf solutions; many of these just exist because I thought it would be fun/educational/challenging to build an X for myself from scratch.

    I've made

    - A dynamic programming language, Ink (https://dotink.co), which runs in "production" (for whatever that means for side projects) for around a dozen projects written in it.

    - A compiler to compile that to JavaScript (https://github.com/thesephist/september)

    - A bunch of language tooling around that language, like syntax highlighters, editor plugins, code formatters (for example, the code formatter https://github.com/thesephist/inkfmt)

    - A small UI library (https://github.com/thesephist/torus)

    - A suite of productivity tools (https://thesephist.com/posts/tools/) like notes, todos, shared whiteboard, contacts/CRM

    - Twitter client (https://github.com/thesephist/lucerne/)

    - Theres a few dozen more at (https://thesephist.com/projects/) :)

    Many of these end up building on top of each other, so across the few dozen projects built on top of these tools they form a nice dependency graph -> https://twitter.com/thesephist/status/1367675987354251265

  • GitHub repo vue-emotion

    Seamlessly use emotion (CSS-in-JS) with Vue.js

    Project mention: Dynamic styling in Vue.js | dev.to | 2021-10-11

    Besides of styled-components library, there are also other CSS-in-JS libraries usable for Vue.js, for example Emotion through vue-emotion package.

  • GitHub repo jest-glamor-react

    Jest utilities for Glamor and React

    Project mention: Study Notes for Kent C. Dodds' Javascript Testing Course | dev.to | 2021-08-03

    How do we make effective (and not meaningless and annoying) snapshot tests? https://kentcdodds.com/blog/effective-snapshot-testing According to Justin mentioned by Kent, “Most developers, upon seeing a snapshot test fail, will sooner just nuke the snapshot and record a fresh passing one instead of agonizing over what broke it.” So big snapshot test without telling why is not a good idea. GitHub - kentcdodds/jest-glamor-react: Jest utilities for Glamor and React​ is a nice tool to have if you are using css in js with react. And if you use styled-components, try https://www.npmjs.com/package/jest-styled-components

  • GitHub repo atomize-by-quarkly

    library for creating atomic react components

  • GitHub repo ecommerce-store-reactjs-stripe-oauth2

    This is a fully functional Ecommerce Website which allows the user to login,add products to cart,view products in detail and do the payment through credit card.Built using React,React Router,OAuth2 for user authentication,Stripe for payment and Netlify for deployment.

    Project mention: Boilerplates for websites/app building | dev.to | 2021-06-26

    6.Products detailed page:If you are coding in React then you can use React Router to create a product detailed page.You can fetch the data from external api or the local file. Example:Github Repository Link

  • GitHub repo reddit-frontend

    A reddit front-end written in React

    Project mention: I never bothered showing this, but it ended up getting me a great job so I figured it might be worth posting. I remade the reddit frontend in React, with all custom components and styles. Live version linked at the top of the page. | reddit.com/r/reactjs | 2021-06-22
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-10-14.

Index

What are some of the best open-source css-in-j projects in JavaScript? This list will help you:

Project Stars
1 react-native-web 19,346
2 emotion 13,755
3 stylelint 9,055
4 styled-system 7,041
5 styled-jsx 6,645
6 JSS 6,523
7 Aphrodite 5,239
8 twin.macro 4,785
9 stitches 3,940
10 typography 3,679
11 styletron 3,207
12 goober 2,206
13 Fela 2,071
14 vue-styled-components 1,211
15 design-system 634
16 babel-plugin-tailwind-components 328
17 torus 200
18 vue-emotion 191
19 jest-glamor-react 97
20 atomize-by-quarkly 57
21 ecommerce-store-reactjs-stripe-oauth2 23
22 reddit-frontend 8
Find remote jobs at our new job board 99remotejobs.com. There are 34 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.