SaaSHub helps you find the best software and product alternatives Learn more β
Top 23 TypeScript CSS Projects
-
Having said that, I do still far and away prefer Tailwind as my styling solution for side projects. I've been using it professionally for around three years now, and I find it strikes a nice balance between useful default utility classes and a pleasant developer experience when it comes to expanding its base capabilties (which we cover in detail below). I'm not suggesting that beginners should build with Tailwind straight away - definitely go learn CSS first! But as someone who is very comfortable with how CSS itself works, Tailwind is a productivity boon for me, personally, as I understand what its utility classes are doing under the hood.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
WARP First thing, we need to choose the best terminal app to do this, I usually use one called Hyper Term, but in the last months I've been using another one called Warp terminal, I started to use it because it is an AI powered terminal, basically we can use the terminal AI to get the best bash commands, and improve ours shell scripts and commands, that why I chose it for this tutorial. So we need to download it.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π
Project mention: 14 Must-Have React Libraries Every Beginner Developer Should Know in 2025: π | dev.to | 2024-12-26Write CSS in JS with dynamic props: Styled Components lets you style your components with real CSS, right inside your JavaScript! π¨π» It keeps your styles scoped to the specific component, preventing conflicts. Plus, you can create dynamic styles based on props, making your code more flexible and reusable. π πstyled-components.com
-
novu
Open-Source Notification Platform. Embeddable Notification Center, E-mail, Push and Slack Integrations.
Project mention: I built an open-source social media scheduling, and it blew up π£ | dev.to | 2024-12-02In the past, I worked for Novu, an open-source notification infrastructure tool, and with my help, it grew to 31k stars in two years.
-
Project mention: PostCSS β a tool for transforming CSS with JavaScript | news.ycombinator.com | 2024-09-27
-
-
Well if you want to check out the project you have here: π Docs website π¦ Github repo
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME πππ
HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).
-
-
Create badass, fluid and smooth transitions between your website's pages (https://barba.js.org) by Thierry Michel, Xavier Foucrier, Luigi De Rosa This one is really good - just the minimum API to make these transitions so good.
-
While weβve covered core concepts for creating Open Graph image, you can explore Vercel Image Playground for interactive experimentation. This handy tool lets you visually build and test Open Graph images by directly editing the HTML and CSS that define their appearance. You can play with fonts, colors, layouts, and even preview the generated image in real-time.
-
Project mention: Transform.tools β Convert JSON, YAML, TypeScript to any web format | news.ycombinator.com | 2024-08-26
-
PurgeCSS is a powerful tool that scans your project files for any class names used and removes the unused ones from the final CSS file. This significantly reduces the size of the generated CSS, making your application load faster.
-
-
-
react-nodegui
Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.π
-
cva.style
-
Project mention: Show HN: NativeWindUI β Native Feeling TailwindUI for React Native | news.ycombinator.com | 2024-09-18
[2] https://github.com/nativewind/nativewind
-
If you still think a polymorphic component would be better, really can't deal with plain HTML, or donβt want to write CSS in a separate file (though I am not sure why), my next suggestion would be to take a look at PandaCSS and create custom patterns or explore other options like vanilla-extract. In my opinion, these tools are an over-engineered CSS metalanguage but still better than a polymorphic component.
-
Fontsource1700+ open source fonts packaged as npm packages.
-
-
The reader can say that there are already ready-made abbreviations Emmet, which someone even managed to learn) Yes, they are not bad, but their problem is that there is no clear algorithm there. This was confirmed by Sergey Chikuyonok - the creator of Emmet (I asked him about it). So they do not solve the first problem.
-
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 discussion
TypeScript CSS related posts
-
How I set up my Frontend Mentor projects with Tailwind CSS
-
Building Modern React Apps in 2025 - A Guide to Cutting-Edge Tools and Tech Stacks
-
Tower defense clicker game built with Svelte 5, without canvas. Only CSS transitions and the power of Runes
-
RAG - Designing the CLI interface
-
I was using Tailwind wrong, so you don't have to
-
Creating a Scroll-Spy Menu with Nuxt 3 and Intersection Observer API
-
Stanikmas, Lynn. (2024). Angular Studies | Advanced Components. GitHub.
-
A note from our sponsor - SaaSHub
www.saashub.com | 15 Jan 2025
Index
What are some of the best open-source CSS projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 84,402 |
| 2 | hyperterm | 43,600 |
| 3 | styled-components | 40,580 |
| 4 | novu | 35,977 |
| 5 | PostCSS | 28,616 |
| 6 | Material Components Web | 17,143 |
| 7 | omi | 13,094 |
| 8 | shoelace-css | 13,088 |
| 9 | linaria | 11,754 |
| 10 | barba | 11,720 |
| 11 | satori | 11,338 |
| 12 | transform | 8,243 |
| 13 | purgecss | 7,843 |
| 14 | windicss | 6,532 |
| 15 | modern-normalize | 6,421 |
| 16 | react-nodegui | 6,184 |
| 17 | cva | 5,923 |
| 18 | nativewind | 5,578 |
| 19 | panda | 5,312 |
| 20 | fontsource | 5,075 |
| 21 | tailwind-merge | 4,746 |
| 22 | emmet | 4,486 |
| 23 | mdui | 4,218 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com