#css-in-js

Open-source projects categorized as css-in-js
Language filter: + JavaScript + TypeScript

Top 23 css-in-j 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: bURL: A tiny web app for breaking down URLs | dev.to | 2021-04-19

    I'm thinking of quickly patching up the UI using a React component library like Ant Design or React Bootstrap. Then later we could go completely custom by using our own CSS. For CSS in a React app, I think a CSS-in-JS solution provides a good dev experience. So I'm thinking styled-components.

  • GitHub repo react-native-web

    React Native Components and APIs for the Web

    Project mention: How do developers get their UI to look exactly the same on mobile and inside the browser? | reddit.com/r/AskProgramming | 2021-04-06

    Or, you can build your web app using and components from React Native for Web, and now your presentational components work in both apps, too. That's how Twitter build their web and mobile apps, but using this library is a decision that needs to be made early in a product's development.

  • GitHub repo emotion

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

    Project mention: Can I have V8 with built-in JSX? | reddit.com/r/react | 2021-04-10

    There are a lot of useful libraries, that wrap the jsx-function to define additional behaviour without needing to reimplement react or jsx. Emption is one such example (here's the code). You'd loose these

  • GitHub repo stylelint

    Project mention: An amazing template for your React application | dev.to | 2021-04-12

    To lint css code, stylelint is used. The linter checks your code for typos and spelling mistakes. To run the linter, you can use yarn lint:css script

  • GitHub repo linaria

    Zero-runtime CSS in JS library

    Project mention: Why I moved from Styled Components to (S)CSS modules | dev.to | 2021-04-15

    In future, I might try out libraries like Linaria which, during coding have the exact same API as styled-components, but the runtime is completely removed on build and the CSS is extracted into separate CSS files, which is super DOPE!!! 🤓

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

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

    Project mention: Uso do Styled Components no React | dev.to | 2021-04-14

    JSS

  • GitHub repo styled-jsx

    Full CSS support for JSX without compromises

    Project mention: Trying to implement language injection for template literals: CSS inside of ` ` | reddit.com/r/Atom | 2021-03-31

    https://github.com/vercel/styled-jsx#syntax-highlighting

  • GitHub repo Aphrodite

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

    Project mention: Share variables between JavaScript and CSS | dev.to | 2021-02-28

    I've already mentioned Emotion, but other CSS-in-JS libraries to check out include Styled Components, JSS, Theme-UI, Radium, and Aprhodite.

  • 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: Created a styled-components like library for using TailwindCSS (or other class framework) in a cleaner an meaningful way than inline classes. Contributions are Welcome! | reddit.com/r/javascript | 2021-04-05

    Nice work. Huge fan of this myself — let's me write emotion style syntax with tailwind and also adds a handy `tw` attribute for simple non-conditional/non-advanced styling.

  • 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: Just-In-Time: The Next Generation of Tailwind CSS | reddit.com/r/javascript | 2021-03-15

    [0] https://www.styletron.org/ [1] https://baseweb.design/blog/getting-started-with-styletron#getting-started-with-styletron

  • GitHub repo stitches

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

    Project mention: I made a video going over getting SSR and TailwindCSS setup in a Headless WP environment with NextJS. I hope it helps! | reddit.com/r/ProWordPress | 2021-03-31

    Nice. Have you seen Stitches? Together with Radix UI it's the foundation of Modulz, "Gutenberg for React" or "Figma with code" basically. Could be huge in a year or two from now..

  • GitHub repo Fela

    State-Driven Styling in JavaScript

  • GitHub repo jsxstyle

    Inline style system for React and Preact

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

    A familiar and performant compile time CSS-in-JS library for React.

    Project mention: A familiar and performant compile time CSS-in-JS library for React | news.ycombinator.com | 2021-03-21
  • GitHub repo twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

    Project mention: How to reproduce Death Stranding UI with react and react-three-fiber | dev.to | 2021-04-15

    twind (styling solution based on Tailwind)

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

    a color parsing and manipulation lib served in roughly 2kB

  • GitHub repo react-awesome-reveal

    React components to add reveal animations using the Intersection Observer API and CSS Animations.

    Project mention: I made Starbucks ! 🚀🔥 | reddit.com/r/reactjs | 2021-01-27

    Here is the GitHub repo if your interested https://github.com/dennismorello/react-awesome-reveal

  • GitHub repo next-shopify-storefront

    🛍 A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.

    Project mention: Trying to build a site using Shopify, Gatsby, and anything else | reddit.com/r/gatsbyjs | 2021-01-09

    This example repo has been up for 2 years.

  • GitHub repo babel-plugin-tailwind-components

    Use Tailwind with any CSS-in-JS library

    Project mention: Tailwind but not purgeCSS, and be friendly with other frameworks | dev.to | 2020-10-15

    bradlc / babel-plugin-tailwind-components

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-04-19.

Index

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

Project Stars
1 styled-components 33,257
2 react-native-web 18,575
3 emotion 12,843
4 stylelint 8,652
5 linaria 6,995
6 styled-system 6,660
7 JSS 6,281
8 styled-jsx 6,223
9 Aphrodite 5,186
10 twin.macro 3,906
11 typography 3,592
12 styletron 3,149
13 stitches 2,326
14 Fela 2,003
15 jsxstyle 1,976
16 goober 1,919
17 compiled 1,334
18 twind 1,195
19 design-system 615
20 color2k 372
21 react-awesome-reveal 369
22 next-shopify-storefront 334
23 babel-plugin-tailwind-components 324