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 Material Design Projects
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
-
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.
-
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.
-
material-shell
A modern desktop interface for Linux. Improve your user experience and get rid of the anarchy of traditional desktop workflows. Designed to simplify navigation and reduce the need to manipulate windows in order to improve productivity. It's meant to be 100% predictable and bring the benefits of tools coveted by professionals to everyone.
-
notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
-
material-tailwind
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
-
materio-mui-react-nextjs-admin-template-free
Materio is the Most Powerful & Comprehensive free Next.js React admin template based on MUI !! 🚀
-
ej2-javascript-ui-controls
Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.
-
Syncfusion React UI Components Library (Essential JS 2)
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.
-
tokyo-free-white-react-admin-dashboard
Free React Typescript Admin Dashboard Template built with Material-UI
-
ej2-angular-ui-components
Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: Ask HN: Is there a react test framework that works? | news.ycombinator.com | 2024-05-24> [0, 1, 2, -1, 10, 11, 12, 13, 14, -1, 26, 27, 28]
What is that supposed to represent in terms of pagination? Are they cursors...?
> I didn't think the code that generated the HTML from that was really worth testing because it was so superficial.
For what it's worth (as a frontend person), pagination is traditionally one of the trickier things for us to make sure is working correctly. Off-by-one mistakes can happen for example (especially with zero-indexed items). Or sometimes the prev/next buttons don't correctly use the same math as the page 1, 2, 3, etc. buttons. It gets even harder if you don't know the total length in the beginning, or if you allow multiple page sizes or sorts/filters, or use lazy loading, etc.
For those reasons I try to use a ready-built lib like MUI where all that is already tested internally (like https://github.com/mui/material-ui/blob/next/packages/mui-ma... or https://github.com/mui/material-ui/blob/next/packages/mui-ba...), but we still add our own automated and manual tests in our own usages.
But then again I'm bad at math and division, lol, so maybe it's just my own weakness.
I was recently able to sit down with some of the core members of Ionic, who also created Stencil a toolchain for building Design Systems and Progressive Web Apps. We talked at great length how typically companies are approaching Ionic from a Design Team and need help building components. As a developer I wanted to talk about the Web Components that are used within the Design System first. There was a decent amount of surprise, so I thought I would break down what a Design System is and why it doesn't matter which end you start with, as long as you have both your Design and Development teams working together to build your Design System.
👉 https://vuetifyjs.com
Angular Material 3 is now stable, material.angular.io is updated by the new themes and documentation
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
Project mention: Senior devs — how do you handle styles; and how do you scale it | /r/reactnative | 2023-10-12In most cases they are wrappers around pure RN components (as I have been burnt by styling lib in the past - exactly NativeBase and its performance issues) and in the end, created components look like very light-weight version of RN paper components*:* https://github.com/callstack/react-native-paper/blob/main/src/components/Typography/Text.tsx.
Project mention: Web Components e a minha opinião sobre o futuro das libs front-end | dev.to | 2024-04-04
I really want https://material-shell.com/ for MacOS
it was perfect for using a single monitor
kinda like a deterministic alt+tab, you set up the layout of "workspaces" and they're always in the same place
I keep getting annoyed at alt+tab because I accidentally clicked on another window and now the order is messed up
GitHub link: GitHub – iamhosseindhv/notistack
Project mention: How to Create an Awesome Landing Page 💻 📱 with Tailwind CSS(Step-by-Step guide) | dev.to | 2023-11-16Material Tailwind takes the essence of Tailwind CSS and offers a suite of pre-built, elegant components that adhere to modern design standards. It's like having a set of building blocks, ready to be assembled, but with the flexibility to be customized on the go. Developers can instantly implement components like buttons, modals, and cards with Material Tailwind, skipping the foundational design steps.
Materio is an admin template based on Material UI. Its UI is developer-friendly, rich with features, and highly customizable. It is available in JavaScript and TypeScript versions, and comes with features like:
Project mention: Hello, I want so serious help, tommow is deadline of the project. I want to create exact this type of navigation in angular 13.can you please tell me how to make it? | /r/Angular2 | 2023-06-26You can copy the side menu component from this project. https://github.com/ng-matero/ng-matero/tree/master/src/app/theme/sidemenu
TypeScript Material Design related posts
-
What's new in Angular 18
-
Ask HN: Is there a react test framework that works?
-
⭐Angular 18 Features ⭐
-
6 CSS tools for more efficient and flexible CSS handling
-
Zero-runtime CSS-in-JS implementation
-
Top Material Design 3 web frameworks of 2024
-
A new material timepicker component
-
A note from our sponsor - SurveyJS
surveyjs.io | 1 Jun 2024
Index
What are some of the best open-source Material Design projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | Material UI | 92,008 |
2 | Ionic Framework | 50,536 |
3 | vuetify | 39,149 |
4 | components | 24,122 |
5 | Material Components Web | 17,091 |
6 | react-native-paper | 12,328 |
7 | vsc-material-theme | 11,179 |
8 | material-web | 8,774 |
9 | material-shell | 7,234 |
10 | react-native-material-kit | 4,840 |
11 | notistack | 3,808 |
12 | material-tailwind | 3,429 |
13 | angular-ngrx-material-starter | 2,810 |
14 | covalent | 2,234 |
15 | DevExtreme React Grid | 2,061 |
16 | mdbootstrap | 1,407 |
17 | materio-mui-react-nextjs-admin-template-free | 1,366 |
18 | ng-matero | 1,190 |
19 | materialize | 848 |
20 | ej2-javascript-ui-controls | 393 |
21 | Syncfusion React UI Components Library (Essential JS 2) | 326 |
22 | tokyo-free-white-react-admin-dashboard | 289 |
23 | ej2-angular-ui-components | 272 |
Sponsored