TypeScript CSS

Open-source TypeScript projects categorized as CSS

Top 23 TypeScript CSS Projects

  • hyperterm

    A terminal built on web technologies

    Project mention: Hyper: A terminal built on web technologies | news.ycombinator.com | 2024-02-16
  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    Project mention: The Secret Weapon of Top Developers: 7 React JS Libraries You Can't Afford to Ignore | dev.to | 2024-02-21

    Embracing the styled-components library allows developers to write actual CSS code to style their components. It utilizes tagged template literals to style components, enabling a seamless integration of styles within the component's JavaScript file. This approach eliminates the mapping between components and styles, thus enhancing developer productivity and component reusability.

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

  • novu

    🔥 The open-source notification infrastructure with fully functional embedded notification center 🚀🚀🚀

    Project mention: What's new in Novu 0.23? | dev.to | 2024-02-12

    You can find the full changelog on GitHub.

  • PostCSS

    Transforming styles with JS plugins

    Project mention: PostCSS - my initial experience | dev.to | 2024-01-11

    the plugins in the official PostCSS website were old like IE6 or the marquee tag, and

  • Material Components Web

    Modular and customizable Material Design UI components for the web

    Project mention: Google Groups ending support for Usenet | news.ycombinator.com | 2023-12-15

    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

  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. Works with all frameworks as well as regular HTML/CSS/JS. 🥾

    Project mention: Show HN: Hyperdiv – Reactive, immediate-mode web UI framework for Python | news.ycombinator.com | 2024-02-20

    Hello HN,

    I'm releasing Hyperdiv (https://hyperdiv.io), a framework for rapidly developing reactive browser UIs in Python, with immediate-mode syntax and using Shoelace (https://shoelace.style) as its built-in component system.

    This short coding video will give you a good idea of what it is: https://www.youtube.com/watch?v=4XJKfxaqvGE

    I wrote a brief article about the motivation and approach: https://hyperdiv.io/intro.html

    Hyperdiv doesn't aim to compete with serious full-stack frameworks. The core aim was to make it easy and fast to prototype apps and build UI-based tools. I was originally motivated by internal tools at work -- feeling the need to quickly put together UI-based tools to share with both technical and non-technical coworkers, without having to stand up and maintain a full internal stack.

    This is my first major open source release. I really appreciate your feedback and support. - Marius

  • barba

    Create badass, fluid and smooth transitions between your website’s pages

    Project mention: Coming to grips with JS: a Rubyist's deep dive | dev.to | 2023-12-29

    Sure, you can use any number of JS-avoidance libraries. I'm a fan of Turbo, and there's also htmx, Unpoly, Alpine, hyperscript, swup, barba.js, and probably others.

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

  • linaria

    Zero-runtime CSS in JS library

    Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07

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

  • satori

    Enlightened library to convert HTML and CSS to SVG

    Project mention: Learn SVG with 25 examples – How to code images in HTML | news.ycombinator.com | 2023-12-07

    Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.

    This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]

    [0]: https://github.com/vercel/satori

    [1]: https://github.com/shepherdjerred/glitter-boys

  • purgecss

    Remove unused CSS

    Project mention: How to load critical styles for a NextJs app | /r/nextjs | 2023-10-09

    A similar question was already posted here but, I think looking at the raw html, we will be able to better determine the required css than what Purgecss does.

  • transform

    A polyglot web converter. (by ritz078)

    Project mention: 🔥Top 5 Killer Websites for Developers😎 | dev.to | 2023-12-04

    Visit site: https://transform.tools Github link: https://github.com/ritz078/transform

  • windicss

    Next generation utility-first CSS framework.

  • react-nodegui

    Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀

    Project mention: [AskJS] Are there any Electron alternatives that uses less recourses? | /r/javascript | 2023-03-23

    In fact, there's a version with a React wrapper, pretty much similar to React Native

  • eui

    Elastic UI Framework 🙌

  • modern-normalize

    🐒 Normalize browsers' default style

  • cva

    Class Variance Authority

    Project mention: Use postcss-cva to generate cva method | dev.to | 2024-02-01

    cva.style

  • panda

    🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

    Project mention: Panda CSS: build time and type-safe CSS-in-JS | news.ycombinator.com | 2024-02-05
  • fontsource

    Self-host Open Source fonts in neatly bundled NPM packages.

    Project mention: Variable Fonts | news.ycombinator.com | 2024-01-28

    Fontsource[0] is also an easy way to self-host variable fonts via NPM packages.

    [0] https://fontsource.org/?variable=true

  • emmet

    The essential toolkit for web-developers

    Project mention: How to code faster - VS Code edition | dev.to | 2023-11-24

    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.

  • nativewind

    React Native utility-first universal design system - powered by Tailwind CSS

    Project mention: Best headless UI libraries in React Native | dev.to | 2023-10-04

    At the time of writing of this article, the library currently relies on an older version of TailwindCSS

  • tailwind-merge

    Merge Tailwind CSS classes without style conflicts

    Project mention: Styling React 2023 edition | dev.to | 2023-11-03

    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.

  • mdui

    Material Design 3(Material You) UI components using Web Components. mdui 是使用 Web Components 实现 Material You ( Material Design 3 ) 设计规范的前端组件库

  • preline

    Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

    Project mention: Show HN: Preline UI v2.0 – open-source Tailwind Components Library | news.ycombinator.com | 2024-01-11
  • 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.

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 2024-02-21.

TypeScript CSS related posts

Index

What are some of the best open-source CSS projects in TypeScript? This list will help you:

Project Stars
1 hyperterm 42,359
2 styled-components 39,942
3 novu 31,908
4 PostCSS 28,091
5 Material Components Web 17,045
6 shoelace-css 11,591
7 barba 11,317
8 linaria 11,080
9 satori 9,791
10 purgecss 7,620
11 transform 6,876
12 windicss 6,502
13 react-nodegui 6,162
14 eui 6,012
15 modern-normalize 5,642
16 cva 4,988
17 panda 4,446
18 fontsource 4,428
19 emmet 4,419
20 nativewind 3,896
21 tailwind-merge 3,805
22 mdui 3,804
23 preline 3,414
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.
www.influxdata.com