Top 9 TypeScript atomic-css Projects

unocss

56 15,386 9.6 TypeScript

The instant on-demand atomic CSS engine.

Project mention: Tailwind CSS v4.0.0 Alpha | news.ycombinator.com | 2024-03-06

I wish tailwind would support attributify like https://github.com/unocss/unocss, which is much more readable for complex layouts:
  link

tamagui

55 9,992 10.0 TypeScript

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

Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29

Tamagui 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:

SurveyJS

surveyjs.io sponsored

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

12 4,681 9.9 TypeScript

🐼 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

5 3,322 6.5 TypeScript

:zap: Toolkit for component-oriented styling
packages

38 417 6.5 TypeScript

💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎. (by stylify)
fractures

2 366 8.5 TypeScript

Only the good parts
aesthetic

0 203 0.0 TypeScript

🎨 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)
InfluxDB

www.influxdata.com sponsored

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

5 31 6.3 TypeScript

A TypeScript DSL for writing utility CSS in React/JSX (by homebound-team)

Project mention: StyleX – Meta's Styling Library | news.ycombinator.com | 2023-12-05

Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.
That said, we don't actually use the feature that much, vs. higher-level logical props like ``.
I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.
Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.
[1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...
[2]: https://github.com/homebound-team/beam/blob/main/src/compone...

windblade

8 14 8.6 TypeScript

UnoCSS preset based on Tailwind with multiple improvements

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