TypeScript css-in-js

Open-source TypeScript projects categorized as css-in-js | Edit details
Related topics: #React #CSS #TypeScript #ReactJS #PostCSS

Top 15 TypeScript css-in-j 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: How often should I comment HTML? | reddit.com/r/reactjs | 2022-01-21

    I'm not sure if this is a response to my comment about styled-components. If so, styled-components is something specific. https://styled-components.com/ (Emotions library also has this as an option too). It's not just a wrapper. And you wouldn't be able to use it in conjunction with bootstrap classes unless you took additional steps in the setup. But nevermind about this. It's not necessary, I was just taking a guess as to what code you were referring to.

  • GitHub repo linaria

    Zero-runtime CSS in JS library

    Project mention: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11

    Linaria (Most popular, support React and Svelte)

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • GitHub repo typestyle

    Making CSS Typesafe 🌹

    Project mention: My tech choices for building a modern SPA | dev.to | 2022-01-09

    I like TypeStyle for component-scoped styling. With TypeStyle, I can use the full power of a programming language (TypeScript) to build up my styles and share them among components. And I can nicely co-locate the styles in the same file as my components.

  • 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: SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins? | dev.to | 2022-01-11

    Compiled (Compile time CSS-in-JS solution from Atlassian)

  • GitHub repo tamagui

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

    Project mention: Tailwind CSS v3 | news.ycombinator.com | 2021-12-09

    Shameless self-plug but if you'd like the same idea but with an optimizing compiler that outputs clean CSS at build-time, try Tamagui (https://tamagui.dev).

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

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

  • GitHub repo color2k

    a color parsing and manipulation lib served in roughly 2kB

  • GitHub repo css-in-js

    A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js

    Project mention: Which is better CSS-in-JS or CSS for large and scalabe project? | reddit.com/r/reactjs | 2021-11-04

    OP, if you wanna go down that rabbit hole, check https://github.com/andreipfeiffer/css-in-js

  • GitHub repo aesthetic

    🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! (by aesthetic-suite)

  • GitHub repo match-media

    Universal polyfill for match media API using Expo APIs on mobile

    Project mention: How to do responsive design in RN? | reddit.com/r/reactnative | 2021-11-16

    I've been using Expo's matchMedia polyfill, which does the job but's still not as good as true media queries.

  • GitHub repo rosebox

    CSS in Typescript

  • GitHub repo panache

    Write CSS as React components with Style Objects (by oscarpas)

    Project mention: I made a library for writing CSS as React components, inspired by Styled Components. It comes with additional features such as responsive CSS variables, composable styles, first class media support and type-safe styles. | reddit.com/r/reactjs | 2021-03-16

    Also check it out on Github: https://github.com/oscarpas/panache

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 2022-01-21.

TypeScript css-in-js related posts

Index

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

Project Stars
1 styled-components 35,734
2 linaria 8,526
3 typestyle 2,944
4 jsxstyle 1,994
5 twind 1,925
6 compiled 1,537
7 tamagui 1,271
8 react-awesome-reveal 507
9 next-shopify-storefront 429
10 color2k 405
11 css-in-js 402
12 aesthetic 193
13 match-media 114
14 rosebox 66
15 panache 4
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.

Sponsored
Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.
www.sonarlint.org