TypeScript css-in-js

Open-source TypeScript projects categorized as css-in-js
Edit details
Topics: #React #CSS #TypeScript #styled-components #ReactJS
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com
Sponsored

Top 23 TypeScript css-in-j Projects

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: The Future of CSS | dev.to | 2023-02-09

    Styled Components

  • linaria

    Zero-runtime CSS in JS library

    Project mention: What is the best CSS framework to use with React? why? | reddit.com/r/react | 2023-01-20

    https://github.com/callstack/linaria is objectively the best. It's 100% styled component compatible, but with zero runtime which not only makes it substantially faster, but also makes it easy to do things like server side rendering, etc.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • 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: CSS Style Guide for Web Dev? | reddit.com/r/learnprogramming | 2023-01-30

    Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.

  • tamagui

    Universal UI kit and style system for React Native + Web - with an optimizing compiler 🚄

    Project mention: React Native + Expo (NextJS) best approaches | reddit.com/r/reactnative | 2023-02-03

  • styletron

    :zap: Toolkit for component-oriented styling

    Project mention: A recruiter asked me this. | reddit.com/r/ProgrammerHumor | 2022-03-03

    React is pretty much its own language at this point. With J/TSX. Not even CSS is immune to react's approach of "what everything was proprammatically generated divs?", case and point https://www.styletron.org

  • typestyle

    Making CSS Typesafe 🌹

  • jsxstyle

    Inline style system for React and Preact

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • compiled

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

    Project mention: Why is tailwind so hyped? | reddit.com/r/webdev | 2023-01-13

    tags inside SFCs are typically injected as native tags during development to support hot updates. For production they can be extracted and merged into a single CSS file.

    There are also 3rd party CSS libs that do the same thing such as linaria, vanilla-extract, and compiled CSS. Which can be used in the event you're stuck with something that doesn't have baked in support via SFC formats (looking at you React).

    These are my preferred ways of handing it.

    1. Tailwind

    Option 2 is tailwind, which works backwards.

    That is, instead of the above with extraction where you write the styles, and the framework or libs extract them and replace them with class names, it's the other way around.

    You're writing class names first (which are essentially aggregated CSS property-values) which then generate and/or reference styles.

    It has the advantage of being easy to write (assuming you've got editor LSP, linting, etc), but as you've discovered, it's difficult to read / can get really messy really fast.

    As far as all the other claims on the Tailwind site, it's all marketing, at least 80% bullshit.

  • treat

    :candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime. (by seek-oss)

  • ui-box

    Blazing Fast React UI Primitive

  • react-awesome-reveal

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

    Project mention: React Animation Library | reddit.com/r/reactjs | 2022-09-04

    Hi! A new major version of React Awesome Reveal, an animation library for React apps for easily adding revealing effects, is now out 🚀 Give it a try!

  • design-system

    Priceline.com Design System

    Project mention: How do you guys add Styles to your React project | reddit.com/r/reactjs | 2022-07-13

    This one just has a couple variants I've done, but you can add as many as you want. My dev mentor is a Senior who works on the design system at Priceline and showed me how. You can find the docs for it here: https://priceline.github.io/design-system/

  • css-in-js

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

  • Tailwind-Styled-Component

    Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

    Project mention: Is using styled components in this way just inline style with extra steps?? | reddit.com/r/webdev | 2022-07-26

    If you’re going for shorthand css with styled components, you might want to try Tailwind Styled Components

  • react-redux-saga-boilerplate

    Starter kit with react-router, react-helmet, redux, redux-saga and styled-components

    Project mention: Why are examples of scaled projects so hard to find? | reddit.com/r/reactjs | 2022-05-21

  • next-shopify-storefront

    🛍 A Shopping Cart built with TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... and Material UI.

  • color2k

    a color parsing and manipulation lib served in roughly 2kB

  • macaron

    Typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity (by macaron-css)

    Project mention: Show HN: I made Macaron – Type-safe CSS-in-JS with zero-runtime and colocation | news.ycombinator.com | 2023-01-13

    Hey HN, my name is Mokshit and I'm really interested in web-performance and web-development. At the time of writing this, I'm a junior in high school.

    Macaron is a typesafe CSS-in-JS library with zero runtime, colocation, maximum safety and productivity.

    The motivation behind it is that runtime CSS-in-JS libraries, that is most of the CSS-in-JS libs, add alot of bloat to web apps and have a considerable performance drop with a bundle size increase. Alot of them also don't support more performant ways of building web apps like streaming markup. Most of the current compile-time CSS-in-JS libraries try to fix this, but have some or the other drawback like not offering colocation, or not being type-safe.

    Today, Macaron does all this with a compiler that extracts all the style declarations at compile-time and converts them to static css files while also letting you author the type-safe styles in the same file as your application code. It supports both - a vanilla styling API and a styled-component API with support for multiple frameworks like SolidJS and React and build tools like Vite and Esbuild. Macaron is currently missing a webpack plugin, but that will also be published soon, making it compatible with almost all bundlers.

    There's a ton of room for improvement in this space, and I feel like macaron is a step in that direction.

    Github - https://github.com/macaron-css/macaron

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

  • match-media

    Universal polyfill for match media API using Expo APIs on mobile

  • rainbow-sprinkles

    Dynamic, theme-driven, style props for vanilla-extract.

    Project mention: 🌈🧁 Rainbow Sprinkles — Dynamic, theme-driven, style props for Vanilla Extract | reddit.com/r/webdev | 2022-12-17

  • styled

    Minimal CSS-in-JS styled components solution for React.

    Project mention: react-micro-styled: A small, fast, and simple CSS-in-JS solution for React. | reddit.com/r/react | 2022-11-27

  • niftycss

    🎓 A CSS-in-TS, framework-agnostic library to rapidly create reusable designs.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

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 2023-02-09.

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 38,203
2 linaria 10,082
3 twin.macro 6,903
4 tamagui 4,670
5 styletron 3,303
6 typestyle 3,012
7 jsxstyle 2,007
8 compiled 1,802
9 treat 1,149
10 ui-box 1,034
11 react-awesome-reveal 784
12 design-system 688
13 css-in-js 684
14 Tailwind-Styled-Component 634
15 react-redux-saga-boilerplate 592
16 next-shopify-storefront 531
17 color2k 518
18 macaron 362
19 aesthetic 198
20 match-media 124
21 rainbow-sprinkles 95
22 styled 58
23 niftycss 15

Sponsored
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com