15 ms·

Material UI v1 for React is out

169 points by deadcoder0904 8y ago

alexhayes 8y ago
As someone who contributed to a very small part of this I know how hard the core maintainers worked and how patient they were, at least with my very long lived PR. Thank you for staying the course and believing! What an EPIC effort!!!
paws 8y ago
Congrats guys! It's been a pleasure using the pre 1.0 releases -- looking forward to trying 1.0 out. In addition to the overall polish, one of my favorite aspects of this library is the authors' focus on controlling bundle size. Because of this library I learned that ES6 default imports may not be cheap. VSCode users: consider checking out Import Cost extension [1] to keep an eye on this. [1] https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost https://marketplace.visualstudio.com/items?itemName=wix.vsco...
- Griever 8y ago
  Unless I'm misunderstanding something, wouldn't Tree-Shaking remove the unnecessary code paths from each import? Assuming you're using Webpack 3+ that is.
  - WorldMaker 8y ago
    Tree-Shaking (in Webpack 3+) is still somewhat conservative at the module level unless the dependent library also declares "sideEffects": "false" in package.json.
atesti 8y ago
Is there a demo that I don't need to download first?
- onra87 8y ago
  You have demos for every material-ui components in the documentation. https://material-ui.com/demos/app-bar/ https://material-ui.com/demos/app-bar/
onra87 8y ago
Congrats for the hard work ! This lib is a pleasure to use !
sarreph 8y ago
Nothing shy of heroic efforts have gone into making such a comprehensive and wonderful-to-use library! I look forward to seeing its future flourish! Thanks to all who contributed.
fabian2k 8y ago
I looked a bit at this while it was still in beta, and it seemed to be one of the more comprehensive UI libraries for React, and also one of the more active projects. It also isn't restricted to desktop use like some of the other UI libraries. I'm curious about the choice for styling components, there seems to be a lot of different approaches and no clear winner.
- mbrookes 8y ago
  When development of v1 started, JSS was the only solution that (with some tweaking) met all the needs of component library (as opposed to say, an application), as well as being one of the most performant. The thread that this comment[1] is in is where it all starts, but the repo and presentation linked from that comment should give the answers. At least as a snapshot at that point in time). [1]https://github.com/mui-org/material-ui/issues/4066#issuecomment-256772844 https://github.com/mui-org/material-ui/issues/4066#issuecomm...
slig 8y ago
Thank you for your effort and for supporting TypeScript.
prrrush 8y ago
I get that 'cssinjs' is now new and trendy but how can people legitimately pretend that the act of transcribing your css changes to their js format is anything but developer/designer hostile? i can't be alone in mocking something up, then switching to browser to fine tune the css, then taking that back in to codebase. Somebody in work also had the idea of storing every components styling in JSON, then getting the browser to render that as styling...so now you need to understand a JSON->CSS engine just to troubleshoot most styling issues? When will it end. Do we need to rip out the DOM, HTML, JS & CSS and start over because we're creating more elaborate Rude Goldberg machines every couple of months.
soulnothing 8y ago
A big thanks to the developers for this library. I've been using this with kotlin and react. Thanks for also including comprehensive typescript definitions. Great slibrary for spinning up web apps.
lucasverra 8y ago
I'm building my SaaS front-end on react-semantic ui [0]. (non dev builder here). Besides population familiarity with material UI because of Google, am I missing something ? Things I like about React semantic : - very clean documentation : i can search, find , and tweek components - Semantic is less opinionated visually than Material (IMO), and do appreciate lightweight. [0]https://react.semantic-ui.com/ https://react.semantic-ui.com/
- kochthesecond 8y ago
  I tried both at the beginning of 2016, and neither of them seemed very usable at that stage. Both look much better now, and I can't wait to give them a shot. Also noting that the semantic UI docs still give a horrible mobile experience (iOS 11).
  - dopeboy 8y ago
    I've been using SUIR in production for about a year now. It's been working out pretty well.
- harrygeez 8y ago
  Semantic UI is anything but lightweight.
  - pspeter3 8y ago
    Yeah, it feels more heavy to me as well.
  - ocfx 8y ago
    Agreed, I've been using in prod for a while and it is definitely not lightweight by any means, but it works well for the most part.
  - lucasverra 8y ago
    I meant lightweight visually
- 8y ago
mful 8y ago
I've been using the pre-1.0 version for over a year, and recently switched to using the beta of the 1.0, and just want to say thanks — this is far and away the best UI kit I've come in contact with. It's well-designed, comprehensive, customizable, well-documented, and fun to work with. Great work!
- jrs95 8y ago
  Yup, big improvement over pre 1.0 as well. The old data table stuff in particular was pretty painful to use but that’s all been taken care of now. The only thing I’ve used that’s of similar quality to Material UI at this point is Vuetify, which still has a few rough edges
danuk 8y ago
Awesome news, I have been following the beta for the last year, upgrading versions every couple of weeks. The TypeScript definitions were perfect to catch changes especially in property names. Will get my site upgraded ASAP. Can't wait to see where you take this next.
vyrotek 8y ago
Congrats! I've played with this on various projects for year now. The only thing I keep getting frustrated with is styling with Typescript. I don't like the withStyles HoC but the alternatives still feel difficult to use. I would love to just use a decorator but I believe there's a TypeScript feature still missing in order to support it correctly. I'm curious if the recently announced TS 2.9 changes will help.
- kross 8y ago
  Myself and many others are using typescript styling with success. If you have a specific problem, please file an issue so we can take a look.
  - vyrotek 8y ago
    For the record I'm referring to the scenarios described here. https://material-ui.com/guides/typescript/#usage-of-withstyles https://material-ui.com/guides/typescript/#usage-of-withstyl... And this TS issue: https://github.com/Microsoft/TypeScript/issues/4881 https://github.com/Microsoft/TypeScript/issues/4881 The guide just comes off as a bunch of subpar workarounds.
fineng123 8y ago
The new Table APIs are fantastic. There used to be a lot of magic, but now all the selection handling is composable. Big props for the v1!
kuon 8y ago
This looks like great work, but I must be wired wrong, but I hate material UI usability on the desktop. I found myself to be much more productive with more traditional approaches. I don't mean component look/design which I don't really care, as long as I can identify a button, but more the trend to organize things, well "differently". For example, the play store developer dashboard is a nightmare to use, it takes me forever to find functions X or Y. I don't know, "in the old day" I could find where function X would be located very quickly, now I have to search the UI in all places and expand everything until I can find it. Also actions available only when hovering something with the mouse are sometimes hard to discover, especially for keyboard users like me who "tabs" through all controls in a page.
- baconomatic 8y ago
  I'm with you on this. I just don't find Material to be visually appealing.
- JoshMnem 8y ago
  Material Design is fundamentally broken. It's based on the idea that things should look like animated physical materials, but UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Animation should be kept to an absolute minimum unless you're making a game.
  - jdietrich 8y ago
    >UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Could you expand on that point? I'm struggling to think of a user group whose experience would be fundamentally broken by the use of motion in Material. Could you give an example? I use Material extensively and would like to think that I have a good understanding of accessible design, but I'm always looking to improve.
    - kuon 8y ago
      The simplest example I have is text input field with placeholder "transforming" into the label when the field has focus. This simple animation and often color change of the text can be disturbing, especially when the appearance of the keyboard (on mobile) pull the field to the top and hide the label. On desktop, the label can become too small to read when above the text field. This is not really a problem for me, but I've seen people complaining about it. If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. Looking at that page, I realize another MAJOR annoyance[2], what is "123 main street..." description? special "location" event attribute? Removing label from filled field is so bad for usability, for ALL users. I could go on forever with what is wrong on every material design page. [1]: https://material.io/design/components/dialogs.html https://material.io/design/components/dialogs.html [2]: https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QLrzkbNzz/dialogs-fullscreendialog.png https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QL...
rvanmil 8y ago
Congratulations and thank you! This is a fantastic library, my team has been using the beta versions successfully in both desktop and mobile projects. The overall quality of and amount of components in this library has resulted in a major productivity and user experience boost for us.
rakibtg 8y ago
Been using for a long time, but never realized that the product didn't reached v1 yet :) Great job.
philbarr 8y ago
> Examples. We are hosting example projects with the most popular project starts: create-react-app, Next.js, Gatsby, CDN and Parcel. "Example projects" link is broken. But the master branch seems to contain them: https://github.com/mui-org/material-ui/tree/master/examples https://github.com/mui-org/material-ui/tree/master/examples
- olivtassinari 8y ago
  Thanks, it's fixed
quantumofmalice 8y ago
Your weekly reminder that flat ui (and its derivatives, like material UI) are big steps backwards in usability: https://www.nngroup.com/articles/flat-design/ https://www.nngroup.com/articles/flat-design/ Granting the validity of many aesthetic criticisms of over the top skeuomorphism, it will be a good day for users when the fashion-chasing flat ui era is over.
- city41 8y ago
  Material is slowly moving more in the "flat 2.0" direction that the article points out as fixing flat UI's usability problems. It's not fully there yet, but you can see aspects of it in say Google's floating add buttons in Calendar, Inbox, YouTube's search box, etc.
  - quantumofmalice 8y ago
    It is worth meditating on the fact that such a terrible idea was and is able to dominate the visual design community for so long without any significant push back. It has caused real pain for end users, and people who objected were shouted down or ignored. All the more outrageous in an industry that likes to wear the mantle of empiricism.
sandGorgon 8y ago
This is super cool - and the premium themes are very nice. Just wanted to request for more react templates ... say an ecommerce site, etc. There's a burning need for this that is unserviced elsewhere.
- mbrookes 8y ago
  That's absolutely the plan now that v1 has landed, along with Material Design v2 components and themes. Material-UI has been designed with customisability in mind, so you can get the functionality of the components without necessarily having to look like Material Design.
  - lucasverra 8y ago
    how to follow this ? > so you can get the functionality of the components without necessarily having to look like Material Design.
kcuk4life 8y ago
Yeaaah! Lets all use googles and facebooks libraries and give them lot's of respect. Then they we can be happy to say "I am a follower"
blklifematters 8y ago
Google and facebook .. really people. No other designs or frameworks ? Follow, follow..
kpennell 8y ago
This is a fantastic library and made it so much easier for a beginner like me to make stuff!
seattle_spring 8y ago
Great work, guys! Still bummed that you dropped Flow support, but I understand your reasoning. Definitely the most pleasurable UI toolkit to work with, and contributing is a blast.
max23_ 8y ago
Congratulations on v1 and appreciate the efforts! Just in time for my needs as I have been looking for other option besides Bootstrap, Fabric and Blueprint.
0xfeba 8y ago
I'm liking 1.0 of MUI, but React's lifecycle method massacre has just made it impossible for us to move to v17.
michaelangerman 8y ago
I have been programming with Material UI, every day, for the past year and have nothing but very positive comments to make about it. The team is excellent, the code is extremely reliable, and the https://github.com/cssinjs/jss https://github.com/cssinjs/jss just works. Its simple, easy to use, and not having to deal with global stylesheets is a pleasure. And they are just getting started. I look forward to the future with this React toolkit. An incredible effort has been made by the team members.
boraturan 8y ago
Google announced their version of Material React (Alpha) at IO. "Material Components for React (MDC React)" Curious to see how it plays out with Material-UI. They should support Material-UI.
asdsa5325 8y ago
A surprising lack of pictures in this article... One picture that shows the UI (one button)? Really?

169 points by deadcoder0904 8y ago

As someone who contributed to a very small part of this I know how hard the core maintainers worked and how patient they were, at least with my very long lived PR. Thank you for staying the course and believing! What an EPIC effort!!!

paws 8y ago

Congrats guys! It's been a pleasure using the pre 1.0 releases -- looking forward to trying 1.0 out. In addition to the overall polish, one of my favorite aspects of this library is the authors' focus on controlling bundle size. Because of this library I learned that ES6 default imports may not be cheap. VSCode users: consider checking out Import Cost extension [1] to keep an eye on this. [1] https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost https://marketplace.visualstudio.com/items?itemName=wix.vsco...

Griever 8y ago
Unless I'm misunderstanding something, wouldn't Tree-Shaking remove the unnecessary code paths from each import? Assuming you're using Webpack 3+ that is.
- WorldMaker 8y ago
  Tree-Shaking (in Webpack 3+) is still somewhat conservative at the module level unless the dependent library also declares "sideEffects": "false" in package.json.

atesti 8y ago

Is there a demo that I don't need to download first?

onra87 8y ago
You have demos for every material-ui components in the documentation. https://material-ui.com/demos/app-bar/ https://material-ui.com/demos/app-bar/

onra87 8y ago

Congrats for the hard work ! This lib is a pleasure to use !

sarreph 8y ago

Nothing shy of heroic efforts have gone into making such a comprehensive and wonderful-to-use library! I look forward to seeing its future flourish! Thanks to all who contributed.

fabian2k 8y ago

I looked a bit at this while it was still in beta, and it seemed to be one of the more comprehensive UI libraries for React, and also one of the more active projects. It also isn't restricted to desktop use like some of the other UI libraries. I'm curious about the choice for styling components, there seems to be a lot of different approaches and no clear winner.

mbrookes 8y ago
When development of v1 started, JSS was the only solution that (with some tweaking) met all the needs of component library (as opposed to say, an application), as well as being one of the most performant. The thread that this comment[1] is in is where it all starts, but the repo and presentation linked from that comment should give the answers. At least as a snapshot at that point in time). [1]https://github.com/mui-org/material-ui/issues/4066#issuecomment-256772844 https://github.com/mui-org/material-ui/issues/4066#issuecomm...

slig 8y ago

Thank you for your effort and for supporting TypeScript.

prrrush 8y ago

I get that 'cssinjs' is now new and trendy but how can people legitimately pretend that the act of transcribing your css changes to their js format is anything but developer/designer hostile? i can't be alone in mocking something up, then switching to browser to fine tune the css, then taking that back in to codebase. Somebody in work also had the idea of storing every components styling in JSON, then getting the browser to render that as styling...so now you need to understand a JSON->CSS engine just to troubleshoot most styling issues? When will it end. Do we need to rip out the DOM, HTML, JS & CSS and start over because we're creating more elaborate Rude Goldberg machines every couple of months.

soulnothing 8y ago

A big thanks to the developers for this library. I've been using this with kotlin and react. Thanks for also including comprehensive typescript definitions. Great slibrary for spinning up web apps.

lucasverra 8y ago

I'm building my SaaS front-end on react-semantic ui [0]. (non dev builder here). Besides population familiarity with material UI because of Google, am I missing something ? Things I like about React semantic : - very clean documentation : i can search, find , and tweek components - Semantic is less opinionated visually than Material (IMO), and do appreciate lightweight. [0]https://react.semantic-ui.com/ https://react.semantic-ui.com/

kochthesecond 8y ago
I tried both at the beginning of 2016, and neither of them seemed very usable at that stage. Both look much better now, and I can't wait to give them a shot. Also noting that the semantic UI docs still give a horrible mobile experience (iOS 11).
- dopeboy 8y ago
  I've been using SUIR in production for about a year now. It's been working out pretty well.
harrygeez 8y ago
Semantic UI is anything but lightweight.
- pspeter3 8y ago
  Yeah, it feels more heavy to me as well.
- ocfx 8y ago
  Agreed, I've been using in prod for a while and it is definitely not lightweight by any means, but it works well for the most part.
- lucasverra 8y ago
  I meant lightweight visually
8y ago

mful 8y ago

I've been using the pre-1.0 version for over a year, and recently switched to using the beta of the 1.0, and just want to say thanks — this is far and away the best UI kit I've come in contact with. It's well-designed, comprehensive, customizable, well-documented, and fun to work with. Great work!

jrs95 8y ago
Yup, big improvement over pre 1.0 as well. The old data table stuff in particular was pretty painful to use but that’s all been taken care of now. The only thing I’ve used that’s of similar quality to Material UI at this point is Vuetify, which still has a few rough edges

danuk 8y ago

Awesome news, I have been following the beta for the last year, upgrading versions every couple of weeks. The TypeScript definitions were perfect to catch changes especially in property names. Will get my site upgraded ASAP. Can't wait to see where you take this next.

vyrotek 8y ago

Congrats! I've played with this on various projects for year now. The only thing I keep getting frustrated with is styling with Typescript. I don't like the withStyles HoC but the alternatives still feel difficult to use. I would love to just use a decorator but I believe there's a TypeScript feature still missing in order to support it correctly. I'm curious if the recently announced TS 2.9 changes will help.

kross 8y ago
Myself and many others are using typescript styling with success. If you have a specific problem, please file an issue so we can take a look.
- vyrotek 8y ago
  For the record I'm referring to the scenarios described here. https://material-ui.com/guides/typescript/#usage-of-withstyles https://material-ui.com/guides/typescript/#usage-of-withstyl... And this TS issue: https://github.com/Microsoft/TypeScript/issues/4881 https://github.com/Microsoft/TypeScript/issues/4881 The guide just comes off as a bunch of subpar workarounds.

fineng123 8y ago

The new Table APIs are fantastic. There used to be a lot of magic, but now all the selection handling is composable. Big props for the v1!

kuon 8y ago

This looks like great work, but I must be wired wrong, but I hate material UI usability on the desktop. I found myself to be much more productive with more traditional approaches. I don't mean component look/design which I don't really care, as long as I can identify a button, but more the trend to organize things, well "differently". For example, the play store developer dashboard is a nightmare to use, it takes me forever to find functions X or Y. I don't know, "in the old day" I could find where function X would be located very quickly, now I have to search the UI in all places and expand everything until I can find it. Also actions available only when hovering something with the mouse are sometimes hard to discover, especially for keyboard users like me who "tabs" through all controls in a page.

baconomatic 8y ago
I'm with you on this. I just don't find Material to be visually appealing.
JoshMnem 8y ago
Material Design is fundamentally broken. It's based on the idea that things should look like animated physical materials, but UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Animation should be kept to an absolute minimum unless you're making a game.
- jdietrich 8y ago
  >UIs shouldn't look like real motion, because there are many people out there with visual motion accessibility issues. Could you expand on that point? I'm struggling to think of a user group whose experience would be fundamentally broken by the use of motion in Material. Could you give an example? I use Material extensively and would like to think that I have a good understanding of accessible design, but I'm always looking to improve.
  - kuon 8y ago
    The simplest example I have is text input field with placeholder "transforming" into the label when the field has focus. This simple animation and often color change of the text can be disturbing, especially when the appearance of the keyboard (on mobile) pull the field to the top and hide the label. On desktop, the label can become too small to read when above the text field. This is not really a problem for me, but I've seen people complaining about it. If I think about complaint I would have, take the dialog spec[1], both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button. Looking at that page, I realize another MAJOR annoyance[2], what is "123 main street..." description? special "location" event attribute? Removing label from filled field is so bad for usability, for ALL users. I could go on forever with what is wrong on every material design page. [1]: https://material.io/design/components/dialogs.html https://material.io/design/components/dialogs.html [2]: https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QLrzkbNzz/dialogs-fullscreendialog.png https://material.io/design/assets/1K06WW9W94mIiLOEUwXV6Jf7QL...

rvanmil 8y ago

Congratulations and thank you! This is a fantastic library, my team has been using the beta versions successfully in both desktop and mobile projects. The overall quality of and amount of components in this library has resulted in a major productivity and user experience boost for us.

rakibtg 8y ago

Been using for a long time, but never realized that the product didn't reached v1 yet :) Great job.

philbarr 8y ago

> Examples. We are hosting example projects with the most popular project starts: create-react-app, Next.js, Gatsby, CDN and Parcel. "Example projects" link is broken. But the master branch seems to contain them: https://github.com/mui-org/material-ui/tree/master/examples https://github.com/mui-org/material-ui/tree/master/examples

olivtassinari 8y ago
Thanks, it's fixed

quantumofmalice 8y ago

Your weekly reminder that flat ui (and its derivatives, like material UI) are big steps backwards in usability: https://www.nngroup.com/articles/flat-design/ https://www.nngroup.com/articles/flat-design/ Granting the validity of many aesthetic criticisms of over the top skeuomorphism, it will be a good day for users when the fashion-chasing flat ui era is over.

city41 8y ago
Material is slowly moving more in the "flat 2.0" direction that the article points out as fixing flat UI's usability problems. It's not fully there yet, but you can see aspects of it in say Google's floating add buttons in Calendar, Inbox, YouTube's search box, etc.
- quantumofmalice 8y ago
  It is worth meditating on the fact that such a terrible idea was and is able to dominate the visual design community for so long without any significant push back. It has caused real pain for end users, and people who objected were shouted down or ignored. All the more outrageous in an industry that likes to wear the mantle of empiricism.

sandGorgon 8y ago

This is super cool - and the premium themes are very nice. Just wanted to request for more react templates ... say an ecommerce site, etc. There's a burning need for this that is unserviced elsewhere.

mbrookes 8y ago
That's absolutely the plan now that v1 has landed, along with Material Design v2 components and themes. Material-UI has been designed with customisability in mind, so you can get the functionality of the components without necessarily having to look like Material Design.
- lucasverra 8y ago
  how to follow this ? > so you can get the functionality of the components without necessarily having to look like Material Design.

kcuk4life 8y ago

Yeaaah! Lets all use googles and facebooks libraries and give them lot's of respect. Then they we can be happy to say "I am a follower"

blklifematters 8y ago

Google and facebook .. really people. No other designs or frameworks ? Follow, follow..

kpennell 8y ago

This is a fantastic library and made it so much easier for a beginner like me to make stuff!

seattle_spring 8y ago

Great work, guys! Still bummed that you dropped Flow support, but I understand your reasoning. Definitely the most pleasurable UI toolkit to work with, and contributing is a blast.

max23_ 8y ago

Congratulations on v1 and appreciate the efforts! Just in time for my needs as I have been looking for other option besides Bootstrap, Fabric and Blueprint.

0xfeba 8y ago

I'm liking 1.0 of MUI, but React's lifecycle method massacre has just made it impossible for us to move to v17.

michaelangerman 8y ago

I have been programming with Material UI, every day, for the past year and have nothing but very positive comments to make about it. The team is excellent, the code is extremely reliable, and the https://github.com/cssinjs/jss https://github.com/cssinjs/jss just works. Its simple, easy to use, and not having to deal with global stylesheets is a pleasure. And they are just getting started. I look forward to the future with this React toolkit. An incredible effort has been made by the team members.

boraturan 8y ago

Google announced their version of Material React (Alpha) at IO. "Material Components for React (MDC React)" Curious to see how it plays out with Material-UI. They should support Material-UI.

asdsa5325 8y ago

A surprising lack of pictures in this article... One picture that shows the UI (one button)? Really?