DEV Community

donvitocodes
donvitocodes

Posted on • Edited on

Ant Design vs. Material UI

So Ant Design(54,504 stars) has surpassed Material UI(53,012 stars) in github. 😎

Which do you use? If not these 2, how do you style your UI?

You can also vote in Twitter. Will post results here once polling is closed.

GitHub logo ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

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

CI status codecov NPM version NPM downloads

FOSSA Status Covered by Argos Visual Testing

Follow Twitter Renovate status dumi Issues need help

English | 中文

✨ Features

  • 🌈 Enterprise-class UI designed for web applications.
  • 📦 A set of high-quality React components out of the box.
  • 🛡 Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • 🌍 Internationalization support for dozens of languages.
  • 🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

  • Modern browsers
  • Server-side Rendering
  • Electron
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions

📦 Install

npm install antd
Enter fullscreen mode Exit fullscreen mode
yarn add antd
Enter fullscreen mode Exit fullscreen mode

🔨 Usage

import React from 'react';
import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);
Enter fullscreen mode Exit fullscreen mode

TypeScript

GitHub logo mui / material-ui

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

MUI logo

MUI Core

MUI Core contains foundational React UI component libraries for shipping new features faster.

  • Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.

  • Joy UI is a beautifully designed library of React UI components.

  • Base UI is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.

  • MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

Installation

Material UI

Material UI is available as an npm package.

npm:

npm install @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

yarn:

yarn add @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode
Older versions

Note: @next only points to pre-releases Use @latest for the latest stable release.

Base UI

Base…

Top comments (3)

Collapse
 
antdesignui profile image
Ant Design

I perfer Ant Design in all my products.

Collapse
 
chanlito profile image
Chanlito

Right

Collapse
 
ohsik profile image
O

What is the difference??