TypeScript css-in-js

Open-source TypeScript projects categorized as css-in-js

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: 6 CSS tools for more efficient and flexible CSS handling | dev.to | 2024-05-16

    When styled-components hit the CSS scene, it caught many developers' eyes with its core concept: component-level styling. With this approach, your styles are defined directly within your React components using template literals and tagged functions. It’s a straightforward technique that keeps styles tightly coupled with their corresponding components, making your code easier to find, understand, and modify.

  • linaria

    Zero-runtime CSS in JS library

  • Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07

    The code duplication occurred due to disabling the default code splitting algorithm in Next.js. Previous developers used this approach to make Linaria work, which is designed to improve productivity. However, disabling code splitting led to a decrease in performance.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • tamagui

    Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.

  • Project mention: Maintainer Monday | dev.to | 2024-05-13

    You can check out the site for Tamagui here.

  • twin.macro

    πŸ¦Ήβ€β™‚οΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

  • panda

    🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚑️

  • Project mention: Show HN: Tailwind Nested VSCode Extension | news.ycombinator.com | 2024-04-22
  • styletron

    :zap: Toolkit for component-oriented styling

  • typestyle

    Making CSS Typesafe 🌹

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • jsxstyle

    Inline style system for JSX

  • Project mention: Panda CSS: build time and type-safe CSS-in-JS | news.ycombinator.com | 2024-02-05

    Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system.

    jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working.

    Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda.

    https://www.npmjs.com/package/jsxstyle

  • compiled

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

  • Kuma UI

    πŸ»β€β„οΈ A Headless, Utility-First, and Zero-Runtime UI Component Library ✨

  • Project mention: Does it make sense to use new NextJS with UI libraries if I have to put "use client" on top of every page in src/app to make CSS-in-JS work and can't use server components? | /r/reactjs | 2023-06-04

    Kuma UI

  • griffel

    CSS-in-JS with ahead-of-time compilation ⚑️

  • Project mention: StyleX – Meta's Styling Library | news.ycombinator.com | 2023-12-05
  • 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: Top 7 Next.js Animation Libraries in 2023 | dev.to | 2023-08-09
  • 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

  • design-system

    Priceline.com Design System

  • macaron

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

  • use-resize-observer

    A React hook that allows you to use a ResizeObserver to measure an element's size.

  • react-redux-saga-boilerplate

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

  • color2k

    a color parsing and manipulation lib served in roughly 2kB

  • tss-react

    ✨ Dynamic CSS-in-TS solution, based on Emotion

  • tw-classed

  • next-dark-mode

    πŸŒ‘ Enable dark mode for Next.js apps

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
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).

TypeScript css-in-js related posts

  • Darling, I converted our perfectly fine SPA application into SSR: Part 2

    2 projects | dev.to | 14 May 2024
  • Maintainer Monday

    1 project | dev.to | 13 May 2024
  • Approaches to Styling React Components, Best Use Cases

    2 projects | dev.to | 24 Apr 2024
  • Growth Hacking Killed GitHub Stars

    1 project | dev.to | 10 Apr 2024
  • Panda CSS: build time and type-safe CSS-in-JS

    8 projects | news.ycombinator.com | 5 Feb 2024
  • Tamagui – UI kit that unify React Native and Web

    4 projects | news.ycombinator.com | 24 Nov 2023
  • Real-Time Top Reference System (Design Systems and UI Libs) 2023

    1 project | news.ycombinator.com | 14 Oct 2023
  • A note from our sponsor - SaaSHub
    www.saashub.com | 20 May 2024
    SaaSHub helps you find the best software and product alternatives Learn more β†’

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 40,111
2 linaria 11,216
3 tamagui 10,110
4 twin.macro 7,811
5 panda 4,732
6 styletron 3,322
7 typestyle 3,046
8 jsxstyle 2,107
9 compiled 1,965
10 Kuma UI 1,669
11 griffel 1,125
12 ui-box 1,069
13 react-awesome-reveal 1,071
14 css-in-js 806
15 Tailwind-Styled-Component 804
16 design-system 723
17 macaron 716
18 use-resize-observer 621
19 react-redux-saga-boilerplate 607
20 color2k 589
21 tss-react 581
22 tw-classed 505
23 next-dark-mode 217

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com