ant-design-site-temporary VS material-ui

Compare ant-design-site-temporary vs material-ui and see what are their differences.

ant-design-site-temporary

antd repo disappear, we are contacting GitHub to recover. (by ant-design)

material-ui

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. (by mui-org)
Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
ant-design-site-temporary material-ui
2 144
2 74,492
- 1.8%
9.9 10.0
11 months ago 6 days ago
TypeScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

ant-design-site-temporary

Posts with mentions or reviews of ant-design-site-temporary. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-02-14.
  • Ant Design Library GONE!?
    8 projects | reddit.com/r/reactjs | 14 Feb 2021
    It seems like Antd team is recovering their repo and contacting GitHub to recover. See https://github.com/ant-design/ant-design-site-temporary . And I'm sure about Antd and Vue won't leave the world's largest community GitHub. Chinese tech-company and people love to share their awesome code and library.
    8 projects | reddit.com/r/reactjs | 14 Feb 2021

material-ui

Posts with mentions or reviews of material-ui. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-01-24.
  • Choosing the right component library for your design system: MUI vs Chakra
    2 projects | reddit.com/r/reactjs | 24 Jan 2022
    More info here
  • How to Setup Next App, and MUI5 with Typescript
    2 projects | dev.to | 16 Jan 2022
    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
    Enter fullscreen mode Exit fullscreen mode

    step 7
    we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

    import * as React from 'react';
    import Head from 'next/head';
    import { AppProps } from 'next/app';
    import { ThemeProvider } from '@mui/material/styles';
    import CssBaseline from '@mui/material/CssBaseline';
    import { CacheProvider, EmotionCache } from '@emotion/react';
    import theme from '../styles/theme';
    import createEmotionCache from '../../src/lib/createEmotionCache';
    
    // Client-side cache, shared for the whole session of the user in the browser.
    const clientSideEmotionCache = createEmotionCache();
    
    interface MyAppProps extends AppProps {
      emotionCache?: EmotionCache;
    }
    
    const App = (props: MyAppProps) => {
      const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
      return (
        
          
            My page
            
          
          
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            
            
          
        
      );
    };
    
    export default App;
    
    
    Enter fullscreen mode Exit fullscreen mode
  • The world of Awesome CSS Frameworks
    16 projects | dev.to | 11 Jan 2022
    Material-UI - 74K⭐
  • .d.ts files vs .ts, can someone clear this up for me?
    1 project | reddit.com/r/typescript | 8 Jan 2022
    For some reason, you don't want to write in TS, and only in plain JS, but you want your project to have types available for other people who use Typescript. e.g. as it is done by mui project
  • SSR pages fail to load on Vercel with Next.js/MUI
    1 project | reddit.com/r/nextjs | 8 Jan 2022
    I've tried using Next.js v11 and 12. I'm using a custom _app.js and _document.js as specified HERE. I'm confused to why it'd work locally but not on Vercel. Does anyone have any thoughts?
  • Monorepos and Workspaces - an introduction
    8 projects | dev.to | 3 Jan 2022
  • 7 Awesome React UI Component Libraries
    3 projects | dev.to | 22 Dec 2021
    With over 73, 000 plus stars on GitHub, Material UI is one of the most popular UI component libraries which is based on the Google Material's Design. It comes with accessible and easily customizable components that can be used in your React projects. In addition, this open-source library has very detailed documentation to help navigate through the implementation of its features.
  • Next.Js + MUI v5 tutorial
    4 projects | dev.to | 20 Dec 2021
    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import createEmotionCache from '../utility/createEmotionCache'; export default class MyDocument extends Document { render() { return ( ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const originalRenderPage = ctx.renderPage; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); /* eslint-disable */ ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => function EnhanceApp(props) { return ; }, }); /* eslint-enable */ const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };
  • Material UI Login Template
    1 project | reddit.com/r/reactjs | 15 Dec 2021
  • How to Use Material UI (MUI) Icons in React
    2 projects | dev.to | 12 Dec 2021
    One of the benefits of using Material UI icons other than the fact that it’s huge with multiple variants is that it is supported by all major platforms, as well as browsers and if you ever get stuck you can definitely check out their GitHub repo. If that’s not enough, they have an entire page dedicated to support.

What are some alternatives?

When comparing ant-design-site-temporary and material-ui you can also consider the following projects:

antd - An enterprise-class UI design language and React UI library

Tailwind CSS - A utility-first CSS framework for rapid UI development.

rsuite - 🧱 A suite of React components .

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

daisyui - ⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components

emotion - 👩‍🎤 CSS-in-JS library designed for high performance style composition

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

react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg

chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications

vuetify - 🐉 Material Component Framework for Vue

@blueprintjs/core - A React-based UI toolkit for the web

Bulma - Modern CSS framework based on Flexbox