css-in-js

Open-source projects categorized as css-in-js | Edit details
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: Next.js Dashboard layout with TypeScript and Styled components | dev.to | 2021-11-28

    For styling let's use styled-components library:

  • GitHub repo react-native-web

    React Native Components and APIs for the Web

    Project mention: Model development of mobile applications React Native + AWS Amplify | dev.to | 2021-11-11

    Model development of mobile applications React Native and sites on React Native Web.

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

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

    Project mention: The React roadmap for beginners you never knew you needed. | dev.to | 2021-11-23

    Emotion

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

    Zero-runtime CSS in JS library

    Project mention: Goodbye CSS Modules, Hello TailwindCSS | news.ycombinator.com | 2021-11-04

    > And CSS-in-JS has worse performance because styles aren't compiled to sytlesheets like they're supposed to be, they're applied at runtime.

    That depends on the tool. Libraries like Linaria [1] ("zero-runtime" CSS-in-JS) do generate CSS files.

    [1] https://linaria.dev

  • GitHub repo styled-system

    ⬢ Style props for rapid UI development

    Project mention: TaskEz: Design to Code - Chapter 1 | dev.to | 2021-11-27

    You can read more about styled system here, https://styled-system.com/.

  • GitHub repo styled-jsx

    Full CSS support for JSX without compromises

    Project mention: How to achieve this in Next.js Built-In CSS/SCSS Support? | reddit.com/r/reactjs | 2021-11-17
  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • GitHub repo JSS

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

    Project mention: Feel like that studying as a self-taught is taking me further than studying at university | reddit.com/r/webdev | 2021-10-25

    I started writing a long response, but I want to add that a simple CRA + JSS + TS (named exports only) stack solves or abstracts away most of these issues.

  • GitHub repo Aphrodite

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

    Project mention: The React roadmap for beginners you never knew you needed. | dev.to | 2021-11-23

    Aphrodite

  • 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: What's your preferred way to use Tailwind with React? | reddit.com/r/tailwindcss | 2021-11-29

    Do you write "vanilla" TailwindCSS or do you use something like twin.macro?

  • GitHub repo stitches

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

    Project mention: My problem with styled-components | reddit.com/r/reactjs | 2021-11-09

    Stitches

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

  • GitHub repo Fela

    State-Driven Styling in JavaScript

  • GitHub repo jsxstyle

    Inline style system for React and Preact

  • GitHub repo twind

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

    Project mention: Twind: Tailwind-in-JS | news.ycombinator.com | 2021-11-24
  • GitHub repo compiled

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

    Project mention: Goodbye CSS Modules, Hello TailwindCSS | news.ycombinator.com | 2021-11-04

    Author here, I haven't had time to play around with it, but this library[0] from Atlassian looks like a "best of the both worlds" styling approach: CSS-in-JS authorship without the runtime penalty.

    [0] https://compiledcssinjs.com/

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

    create much faster design systems that work on react native + react native web thanks to an optimizing compiler.

    Project mention: Tamagui — React Native + Web UI kit | reddit.com/r/webdev | 2021-11-29
  • 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 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 Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, 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.

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-11-29.

css-in-js related posts

Index

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

Project Stars
1 styled-components 35,288
2 react-native-web 19,494
3 emotion 14,052
4 stylelint 9,269
5 linaria 8,371
6 styled-system 7,106
7 styled-jsx 6,722
8 JSS 6,557
9 Aphrodite 5,251
10 twin.macro 5,029
11 stitches 4,247
12 typography 3,692
13 styletron 3,215
14 goober 2,262
15 Fela 2,085
16 jsxstyle 1,988
17 twind 1,781
18 compiled 1,507
19 vue-styled-components 1,228
20 tamagui 1,010
21 design-system 642
22 react-awesome-reveal 480
23 next-shopify-storefront 408
Find remote jobs at our new job board 99remotejobs.com. There are 35 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com