Alternatives to Material-UI logo

Alternatives to Material-UI

Flat UI, Kendo UI, Ant Design, Material-UI, and react-md are the most popular alternatives and competitors to Material-UI.
635
638
+ 1
174

What is Material-UI and what are its top alternatives?

It is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
Material-UI is a tool in the Front-End Frameworks category of a tech stack.
Material-UI is an open source tool with 53.8K GitHub stars and 14K GitHub forks. Here鈥檚 a link to Material-UI's open source repository on GitHub

Material-UI alternatives & related posts

Flat UI logo

Flat UI

91
87
0
91
87
+ 1
0
Free Bootstrap Framework and Theme
    Be the first to leave a pro
    Flat UI logo
    Flat UI
    VS
    Material-UI logo
    Material-UI
    Kendo UI logo

    Kendo UI

    201
    91
    15
    201
    91
    + 1
    15
    Fast, light, complete: 70+ jQuery-based UI widgets in one powerful toolset
    Kendo UI logo
    Kendo UI
    VS
    Material-UI logo
    Material-UI

    related Material-UI posts

    Adebayo Akinlaja
    Adebayo Akinlaja
    Engineering Manager at Andela | 13 upvotes 75.4K views
    React
    React
    Material-UI
    Material-UI
    Evergreen
    Evergreen
    TypeScript
    TypeScript
    Material Kit
    Material Kit
    Create React App
    Create React App
    Bit
    Bit

    I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen鈥攕ince I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

    A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

    In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

    If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

    See more
    React
    React
    React Router
    React Router
    Material-UI
    Material-UI
    Apollo
    Apollo
    GraphQL
    GraphQL
    #MovieGeeks

    I just finished tweaking styles details of my hobby project MovieGeeks (https://moviegeeks.co/): The minimalist Online Movie Catalog

    This time I want to share my thoughts on the Tech-Stack I decided to use on the Frontend: React, React Router, Material-UI and React-Apollo:

    1. React is by far the Front-End "framework" with the biggest community. Some of the newest features like Suspense and Hooks makes it even more awesome and gives you even more power to write clean UI's

    2. Material UI is a very solid and stable set of react components that not only look good, but also are easy to use and customize. This was my first time using this library and I am very happy with the result

    3. React-Apollo in my opinion is the best GraphQL client for a React application. Easy to use and understand and it gives you awesome features out of the box like cache. With libraries like react-apollo-hooks you can even use it with the hooks api which makes the code cleaner and easier to follow.

    Any feedback is much appreciated :)

    See more
    react-md logo

    react-md

    9
    18
    0
    9
    18
    + 1
    0
    Google's Material Design UI components built with accessibility in mind and React
      Be the first to leave a pro
      react-md logo
      react-md
      VS
      Material-UI logo
      Material-UI
      Angular Material  logo

      Angular Material

      140
      121
      2
      140
      121
      + 1
      2
      Easy to use material design for angular
      Angular Material  logo
      Angular Material
      VS
      Material-UI logo
      Material-UI
      Bootstrap logo

      Bootstrap

      50.2K
      7.3K
      7.5K
      50.2K
      7.3K
      + 1
      7.5K
      Simple and flexible HTML, CSS, and JS for popular UI components and interactions
      Bootstrap logo
      Bootstrap
      VS
      Material-UI logo
      Material-UI

      related Bootstrap posts

      Ganesa Vijayakumar
      Ganesa Vijayakumar
      Full Stack Coder | Module Lead | 15 upvotes 675.5K views
      Codacy
      Codacy
      SonarQube
      SonarQube
      React
      React
      React Router
      React Router
      React Native
      React Native
      JavaScript
      JavaScript
      jQuery
      jQuery
      jQuery UI
      jQuery UI
      jQuery Mobile
      jQuery Mobile
      Bootstrap
      Bootstrap
      Java
      Java
      Node.js
      Node.js
      MySQL
      MySQL
      Hibernate
      Hibernate
      Heroku
      Heroku
      Amazon S3
      Amazon S3
      Amazon RDS
      Amazon RDS
      Solr
      Solr
      Elasticsearch
      Elasticsearch
      Amazon Route 53
      Amazon Route 53
      Microsoft Azure
      Microsoft Azure
      Amazon EC2 Container Service
      Amazon EC2 Container Service
      Apache Maven
      Apache Maven
      Git
      Git
      Docker
      Docker

      I'm planning to create a web application and also a mobile application to provide a very good shopping experience to the end customers. Shortly, my application will be aggregate the product details from difference sources and giving a clear picture to the user that when and where to buy that product with best in Quality and cost.

      I have planned to develop this in many milestones for adding N number of features and I have picked my first part to complete the core part (aggregate the product details from different sources).

      As per my work experience and knowledge, I have chosen the followings stacks to this mission.

      UI: I would like to develop this application using React, React Router and React Native since I'm a little bit familiar on this and also most importantly these will help on developing both web and mobile apps. In addition, I'm gonna use the stacks JavaScript, jQuery, jQuery UI, jQuery Mobile, Bootstrap wherever required.

      Service: I have planned to use Java as the main business layer language as I have 7+ years of experience on this I believe I can do better work using Java than other languages. In addition, I'm thinking to use the stacks Node.js.

      Database and ORM: I'm gonna pick MySQL as DB and Hibernate as ORM since I have a piece of good knowledge and also work experience on this combination.

      Search Engine: I need to deal with a large amount of product data and it's in-detailed info to provide enough details to end user at the same time I need to focus on the performance area too. so I have decided to use Solr as a search engine for product search and suggestions. In addition, I'm thinking to replace Solr by Elasticsearch once explored/reviewed enough about Elasticsearch.

      Host: As of now, my plan to complete the application with decent features first and deploy it in a free hosting environment like Docker and Heroku and then once it is stable then I have planned to use the AWS products Amazon S3, EC2, Amazon RDS and Amazon Route 53. I'm not sure about Microsoft Azure that what is the specialty in it than Heroku and Amazon EC2 Container Service. Anyhow, I will do explore these once again and pick the best suite one for my requirement once I reached this level.

      Build and Repositories: I have decided to choose Apache Maven and Git as these are my favorites and also so popular on respectively build and repositories.

      Additional Utilities :) - I would like to choose Codacy for code review as their Startup plan will be very helpful to this application. I'm already experienced with Google CheckStyle and SonarQube even I'm looking something on Codacy.

      Happy Coding! Suggestions are welcome! :)

      Thanks, Ganesa

      See more
      Francisco Quintero
      Francisco Quintero
      Tech Lead at Dev As Pros | 13 upvotes 259.5K views
      atDev As ProsDev As Pros
      Google Maps
      Google Maps
      React
      React
      Create React App
      Create React App
      Bootstrap
      Bootstrap
      Keen
      Keen
      Slack
      Slack
      Trello
      Trello

      For Etom, a side project. We wanted to test an idea for a future and bigger project.

      What Etom does is searching places. Right now, it leverages the Google Maps API. For that, we found a React component that makes this integration easy because using Google Maps API is not possible via normal API requests.

      You kind of need a map to work as a proxy between the software and Google Maps API.

      We hate configuration(coming from Rails world) so also decided to use Create React App because setting up a React app, with all the toys, it's a hard job.

      Thanks to all the people behind Create React App it's easier to start any React application.

      We also chose a module called Reactstrap which is Bootstrap UI in React components.

      An important thing in this side project(and in the bigger project plan) is to measure visitor through out the app. For that we researched and found that Keen was a good choice(very good free tier limits) and also it is very simple to setup and real simple to send data to

      Slack and Trello are our defaults tools to comunicate ideas and discuss topics, so, no brainer using them as well for this project.

      See more
      Animate.css  logo

      Animate.css

      7.4K
      83
      0
      7.4K
      83
      + 1
      0
      A library of CSS animations
        Be the first to leave a pro
        Animate.css  logo
        Animate.css
        VS
        Material-UI logo
        Material-UI

        related Foundation posts

        Lee Benson
        Lee Benson
        React
        React
        GraphQL
        GraphQL
        Apollo
        Apollo
        JavaScript
        JavaScript
        TypeScript
        TypeScript
        Webpack
        Webpack
        React Helmet
        React Helmet
        styled-components
        styled-components
        Sass
        Sass
        Less
        Less
        PostCSS
        PostCSS
        Bootstrap
        Bootstrap
        Semantic UI
        Semantic UI
        Foundation
        Foundation
        React Router
        React Router
        Koa
        Koa
        #JSX
        #React.
        #Css
        #StyledComponents.
        #Async
        #HTML
        #GraphQL
        #Apollo

        ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

        ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

        React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

        styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

        React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

        Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

        See more
        Ionicons logo

        Ionicons

        1.2K
        8
        0
        1.2K
        8
        + 1
        0
        Beautifully crafted open source icons
          Be the first to leave a pro
          Ionicons logo
          Ionicons
          VS
          Material-UI logo
          Material-UI
          UIkIt logo

          UIkIt

          646
          140
          200
          646
          140
          + 1
          200
          A lightweight and modular front-end framework for developing fast and powerful web interfaces
          UIkIt logo
          UIkIt
          VS
          Material-UI logo
          Material-UI