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. Learn more →
Top 23 TypeScript CSS Projects
-
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.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
novu
🔥 The open-source notification infrastructure with fully functional embedded notification center 🚀🚀🚀
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! 👇👇👇
-
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.
-
react-nodegui
Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
-
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.
This app was built with Svelte Kit, Tailwind CSS, and many other technologies. For a full rundown, please visit the GitHub repository
I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.
In 2023, I had a chat with Max Stoiber, CEO of Stellate, on a podcast to learn about his early success on GitHub. His first open-source project, react-boilerplate/react-boilerplate, gained a whopping 10k stars in just one weekend after appearing on the homepage of Hacker News. This success led Max to drop out of university and create several other popular open-source projects, including styled-components. This library accelerates the process of building styles in React components.
PR for Reference: https://github.com/novuhq/novu/pull/5187
the plugins in the official PostCSS website were old like IE6 or the marquee tag, and
https://github.com/firebase/firebase-ios-sdk/issues/6115
https://github.com/material-components/material-components-w...
Two examples that come to mind but there are plenty
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.
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.
View on GitHub
As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.
Visit site: https://transform.tools Github link: https://github.com/ritz078/transform
cva.style
Fontsource[0] is also an easy way to self-host variable fonts via NPM packages.
Emmet is a content/code assist tool to write code faster and more efficiently. It comes standard with VS Code so there is no need for any plugin. The concept is simple: you start typing an Emmet abbreviation, press TAB or 'ENTER', and a full Emmet snippet for that abbreviation will come out.
We're locking on this specific version of Tailwind CSS to prevent this bug — it should be addressed in NativeWind v4, but more on that later.
clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.
TypeScript CSS related posts
- 🤯 Keep Up With these 50 Articles
- Here are the 10 projects I am contributing to over the next 6 months. Share yours
- ChatCrafters - Chat with AI powered personas
- Growth Hacking Killed GitHub Stars
- Show HN: Brutalisthackernews.com – A HN reader inspired by brutalist web design
- Exploring Catalyst, Tailwind's UI kit for React
- Getting started with NativeWind: Tailwind for React Native
-
A note from our sponsor - SurveyJS
surveyjs.io | 19 Apr 2024
Index
What are some of the best open-source CSS projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | Tailwind CSS | 78,166 |
2 | hyperterm | 42,597 |
3 | styled-components | 40,061 |
4 | novu | 32,436 |
5 | PostCSS | 28,181 |
6 | Material Components Web | 17,075 |
7 | shoelace-css | 11,905 |
8 | barba | 11,395 |
9 | linaria | 11,155 |
10 | satori | 10,076 |
11 | purgecss | 7,650 |
12 | transform | 7,170 |
13 | windicss | 6,507 |
14 | react-nodegui | 6,167 |
15 | eui | 6,043 |
16 | modern-normalize | 5,733 |
17 | cva | 5,192 |
18 | panda | 4,647 |
19 | fontsource | 4,549 |
20 | emmet | 4,431 |
21 | nativewind | 4,158 |
22 | tailwind-merge | 3,991 |
23 | mdui | 3,848 |