Top 8 TypeScript atomic-css Projects

unocss

30 9,717 9.8 TypeScript

The instant on-demand atomic CSS engine.

Project mention: Nuxt 3, UnoCSS and Preset rem to px | dev.to | 2023-03-19

This post is about generating px units by default in UnoCSS when used in Nuxt 3.
tamagui

28 5,084 9.8 TypeScript

The worlds fastest React UI kit also happens to work on Native + Web seamlessly 🙏

Project mention: Is expo ready to support web platform as well? | reddit.com/r/reactnative | 2023-03-26

Lately, we've started using the Solito + Tamagui monorepo template (https://github.com/tamagui/tamagui/tree/master/starters/next-expo-solito) which helps separate things but can make things a little more complex to manage if you've never used a monorepo before.
Appwrite

appwrite.io
sponsored

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!
styletron

0 3,303 5.5 TypeScript

:zap: Toolkit for component-oriented styling
packages

38 369 8.2 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)

Project mention: Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS | dev.to | 2023-02-25

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.
fractures

1 362 7.6 TypeScript

Baseline atomic CSS toolkit.

$fractures logo$

Project mention: Show HN: Sora, Personal Publishing Platform | news.ycombinator.com | 2023-02-19

Maybe the "atomic CSS" part wasn't very clear—we just meant the concept of atomic CSS.
We love tailwind as everyone else in their right mind, but we're using our own flavor of the concept I started years ago: https://fractures.dev
On the why: We plan on having a lot of novel, one off interfaces, which TW isn't just right for. CSS is. We also don't have an frontend scaling problem, as I'm the sole developer here.
aesthetic

0 198 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)
truss

2 30 6.1 TypeScript

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

Project mention: What working with Tailwind CSS every day for 2 years looks like | news.ycombinator.com | 2022-11-29

Fwiw to the avoid 80%-in-TW / 20%-in-SCSS-or-something-else dichotomy/complexity, we built Truss which brings TW (Tachyons) style abbreviations to the existing "something else" tool chain (Emotion in our case).
So then everything goes through a single system.
https://github.com/homebound-team/truss
> tailwind's and SCSS's VS code integration is pretty amazing
We get that too, by being just vanilla TypeScript, no editor-specific integration necessary. :-D
(I've linked to Truss in another response, so will stop now. :-))
Sonar

www.sonarsource.com
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.
windblade

8 11 10.0 TypeScript

UnoCSS preset based on Tailwind with multiple improvements

Project mention: I made significant progress on my "Tailwind Improved" documentation | reddit.com/r/tailwindcss | 2023-02-13

Really appreciate the support! Please note that it is in alpha and not on NPM yet (though dropping any day now) but you can find temporary installation instructions here

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-03-26.