Material Design

Open-source projects categorized as Material Design

Top 23 Material Design Open-Source Projects

  • Flutter

    Flutter makes it easy and fast to build beautiful apps for mobile and beyond

    Project mention: React Labs: What We've Been Working On – February 2024 – React Compiler | news.ycombinator.com | 2024-02-27

    > There is actually a great issue thread on the Flutter GitHub that explains exactly why other solutions do not work correctly when compared to hooks [0]

    Interesting. I assume you are referring to this comment in particular -> https://github.com/flutter/flutter/issues/51752#issuecomment... ?

  • Material UI

    Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

    Project mention: Zero-runtime CSS-in-JS implementation | news.ycombinator.com | 2024-01-29
  • 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.

  • awesome-flutter

    An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.

    Project mention: In-Depth Perspective on Flutter: A Comprehensive Analysis and Practice Guide | dev.to | 2024-02-08

    Website: https://github.com/Solido/awesome-flutter

  • Ionic Framework

    A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

    Project mention: Design Systems with Web Components | dev.to | 2023-12-18

    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.

  • material-design-icons

    Material Design icons by Google

    Project mention: Google Fonts documentation not always up to date? | /r/webdev | 2023-06-30

    They link on the docs to the github which lists these extra options though. https://github.com/google/material-design-icons/tree/master/font So it's easy to miss.

  • Materialize

    Materialize, a CSS Framework based on Material Design

    Project mention: CSS Maker | dev.to | 2024-02-26

    MaterializeCSS https://materializecss.com

  • vuetify

    🐉 Vue Component Framework

    Project mention: Top Material Design 3 web frameworks of 2024 | dev.to | 2024-01-23

    👉 https://vuetifyjs.com

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

  • material-design-lite

    Material Design Components in HTML/CSS/JS

  • Quasar Framework

    Quasar Framework - Build high-performance VueJS user interfaces in record time

    Project mention: Ask HN: What framework/tools to use to build front end in 2023? | news.ycombinator.com | 2023-11-11

    I'm for Vue/Nuxt. While reading React code is fine, I found it easy to shoot myself in the foot (causing circular effects or getting no reactivity) in a way Vue didn't. Vue feels more explicit. I like React's TSX for embedding HTML, but Vue's splitting of model and view appeals to me. I'm torn on that one.

    Vue's ecosystem isn't as big, but it's an established framework. Both React and Vue feel easier to work with than Angular. RxJS is really cool, but also very comprehensive, making it difficult to keep the entire API in mind. At least for me, who only use it casually (used to use it more while at Google.) And on top of that, I have to know the Angular API. Angular used to be great for Material Design, but I nowadays there are MD packages for all systems.

    Nuxt is for Vue what Next is for React: SSR and SSG. It adds auto-imports, which is nice. At this point, I see no reason to use Vue alone, since there's always something that can be pre-rendered. Perhaps the frontpage, or help pages. Since Vue itself provides entrypoints for SSR, Nuxt is more of a file-structure based router that just simplifies things. The documentation is a bit sparse on e.g. the difference between a plugin and a module, and I usually resort to navigating their source to understand things. That might not be everyone's cup of tea.

    If what you're writing is a web app, there is also Quasar, built on top of Vue. Similar to Nuxt in that it ties in directory structure, build system and MVC framework. It is also a Material Design UI widget library. Their selling point is that you can build mobile apps, and web apps with the same library. I.e. like React Native. I felt it strays too far away from the core simplicity of Vue, unlike Nuxt, but it's no doubt a very capable framework.

    Finally, I'm currently using PrimeVue as the UI widget/theming library on top of Vue. It's okay. :\ Switched to it when the Vue Bootstrap project decided to to support Vue 3 (or whatever the situation was.) I haven't come across anything that's actively broken or missing. The companion library PrimeFlex provides layout CSS. Annoyingly, they've decided to close GitHub FRs, and some (far from all) bugs, and just keep track of them internally. Makes it more dificult to communicate, but I don't know their reasoning behind it (they didn't respond when I asked.)

    * https://vuejs.org/

    * https://nuxt.com/

    * https://vitejs.dev/

    * https://primevue.org/

    * https://primeflex.org/

    * https://quasar.dev/

  • mdb-ui-kit

    Bootstrap 5 & Material Design UI KIT

    Project mention: 500 open-source components for TailwindCSS | dev.to | 2023-10-30

    I'd like to share my latest discovery with you. TW Elements is currently, the most popular 3rd party UI kit for TailwindCSS with over 10k Github stars. It's a huge collection of stunning components made with attention to the smallest detail. Forms, cards, buttons, and hundreds of others. All components have dark mode and very intuitive theming options. The project is supported by an engaged community on GitHub, I recommend you check it out and join one of the many discussions. You will find installation instructions here, and you can track the progress of the project live here. The project was kickstarted by @mdbootstrap, a group of open-source developers behind MDB UI Kit - a high-quality UI kit for Bootstrap, and also behind MDB GO - hosting and deployment platform. I highly recommend you to check it out!

  • components

    Component infrastructure and Material Design components for Angular

    Project mention: Top Material Design 3 web frameworks of 2024 | dev.to | 2024-01-23

    👉 https://material.angular.io

  • Hero

    Elegant transition library for iOS & tvOS

    Project mention: Created this app using Swift and a bit of Objective-C | /r/iOSProgramming | 2023-04-30

    I started out with the Hero library (https://github.com/HeroTransitions/Hero) but soon replaced it with custom made animation. However, you may want to look into this library as is has a lot of nice transitions ready to use for most cases.

  • FlutterExampleApps

    [Example APPS] Basic Flutter apps, for flutter devs.

  • framework7

    Full featured HTML framework for building iOS & Android apps

    Project mention: What PWA Can Do Today | news.ycombinator.com | 2023-08-08

    Some frameworks and themes to use in combination :

    - https://konstaui.com/

    - https://framework7.io/

  • mkdocs-material

    Documentation that simply works

    Project mention: The Open Source Sustainability Crisis | news.ycombinator.com | 2024-01-22

    https://squidfunk.github.io/mkdocs-material/

    I'm an 'outsider', but from from the outside the Material For MkDocs Project looks like a very well managed open source project.

    Martin Donath's project uses a 'sponsorware' release strategy to generate donations.

    From my vantage point it seems to be working pretty well.

  • 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

  • material-components-android

    Modular and customizable Material Design UI components for Android

    Project mention: List in view using material3 | /r/androiddev | 2023-05-10
  • MaterialDesignInXamlToolkit

    Google's Material Design in XAML & WPF, for C# & VB.Net.

  • TW-Elements

    𝙃𝙪𝙜𝙚 collection of Tailwind components, sections and templates 😎

    Project mention: 500 open-source components for TailwindCSS | dev.to | 2023-10-30

    I'd like to share my latest discovery with you. TW Elements is currently, the most popular 3rd party UI kit for TailwindCSS with over 10k Github stars. It's a huge collection of stunning components made with attention to the smallest detail. Forms, cards, buttons, and hundreds of others. All components have dark mode and very intuitive theming options. The project is supported by an engaged community on GitHub, I recommend you check it out and join one of the many discussions. You will find installation instructions here, and you can track the progress of the project live here. The project was kickstarted by @mdbootstrap, a group of open-source developers behind MDB UI Kit - a high-quality UI kit for Bootstrap, and also behind MDB GO - hosting and deployment platform. I highly recommend you to check it out!

  • react-native-paper

    Material Design for React Native (Android & iOS)

    Project mention: Senior devs — how do you handle styles; and how do you scale it | /r/reactnative | 2023-10-12

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

  • Material

    A UI/UX framework for creating beautiful applications. (by CosmicMind)

  • MaterialDrawer

    The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

  • bootstrap-table

    An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

    Project mention: blazor with bootstrap and what is different bootstrap-table. | /r/Blazor | 2023-06-06

    but...I don't know what is different Bootstrap 5.x.x inside table and bootstrap-table(https://bootstrap-table.com/).

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

Material Design related posts

Index

What are some of the best open-source Material Design projects? This list will help you:

Project Stars
1 Flutter 160,376
2 Material UI 90,946
3 awesome-flutter 50,426
4 Ionic Framework 50,216
5 material-design-icons 49,496
6 Materialize 38,857
7 vuetify 38,756
8 material-design-lite 32,279
9 Quasar Framework 24,976
10 mdb-ui-kit 23,948
11 components 23,913
12 Hero 21,746
13 FlutterExampleApps 19,749
14 framework7 17,762
15 mkdocs-material 17,557
16 Material Components Web 17,045
17 material-components-android 15,787
18 MaterialDesignInXamlToolkit 14,417
19 TW-Elements 12,536
20 react-native-paper 11,990
21 Material 11,968
22 MaterialDrawer 11,657
23 bootstrap-table 11,649
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