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. Learn more โ
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 ๐
-
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.
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
-
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.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
-
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
-
macaron
Compiled-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
-
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.
CSS-in-JS is a styling technique wherein CSS is composed using JavaScript instead of defined in external files. This method allows CSS to be scoped locally to components rather than globally, reducing the probability of style conflicts. Utilizing JavaScript also enables dynamic styling easily aligned with the component's state or props. Libraries like Styled Components and Emotion are popular choices in the React ecosystem for adopting this method.
Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07The 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.
Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:
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
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-04Kuma UI
Project mention: How do you check when an element changes height or width without using a direct reference to that element? | /r/react | 2023-04-26
TypeScript css-in-js related posts
- Approaches to Styling React Components, Best Use Cases
- Growth Hacking Killed GitHub Stars
- Panda CSS: build time and type-safe CSS-in-JS
- Tamagui โ UI kit that unify React Native and Web
- Real-Time Top Reference System (Design Systems and UI Libs) 2023
- SSR and More for React Native Web
- React-Flow in React Native Possible? Otherwise Alternatives?
-
A note from our sponsor - InfluxDB
www.influxdata.com | 25 Apr 2024
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,087 |
2 | linaria | 11,182 |
3 | tamagui | 9,992 |
4 | twin.macro | 7,802 |
5 | panda | 4,681 |
6 | styletron | 3,321 |
7 | typestyle | 3,047 |
8 | jsxstyle | 2,106 |
9 | compiled | 1,961 |
10 | Kuma UI | 1,657 |
11 | griffel | 1,118 |
12 | ui-box | 1,063 |
13 | react-awesome-reveal | 1,052 |
14 | css-in-js | 806 |
15 | Tailwind-Styled-Component | 799 |
16 | design-system | 722 |
17 | macaron | 710 |
18 | use-resize-observer | 617 |
19 | react-redux-saga-boilerplate | 606 |
20 | color2k | 581 |
21 | tss-react | 558 |
22 | tw-classed | 505 |
23 | next-dark-mode | 217 |
Sponsored