6 ms·

Show HN: Material Kit – Open Source UI for Bootstrap, React, Vuejs, React Native

193 points by axelut 8y ago

axelut 8y ago
Hey guys, the UI kit comes also in Figma, Sketch, Photoshop and Wordpress, you can check more about it here: https://demos.creative-tim.com/material-kit/presentation.html https://demos.creative-tim.com/material-kit/presentation.htm... You can use it for commercial or open source applications as it is released under MIT License. If you have feedback please let us know.
- deleted 8y ago
  [deleted]
- gotrythis 8y ago
  Hi. I came to say it would be great if it was only available in Figma or Sketch files. Perhaps you should add that in your comparison between the regular and pro.
- sambroner 8y ago
  This is an amazingly comprehensive project. What about your architecture lets your support so many frameworks?
avinium 8y ago
I came across the Vuetify dashboard the other day for a side project I'm spinning out (http://www.sweephq.com http://www.sweephq.com - may or may not open source, haven't decided yet). There are some fantastic themes/UI components here. Great job.
- axelut 8y ago
  Hi, thank you for the kind words and congrats for the product. If you do it open source we can let our users know about it, maybe somebody can use it. We should keep in touch as we are working on some email templates that will also be release under MIT license. Ping me at alex@creative-tim.com :D
  - avinium 8y ago
    The e-mail templates also sound like a logical fit - will certainly drop you an e-mail if I decided to release OSS!
- tyteen4a03 8y ago
  Vuetify is so easy to work with. Sure some docs are missing and I don't like some of the default styling but it gives you the ability to write good SPAs with very little effort.
nik736 8y ago
I still don't understand what's so good about Material Design, I absolutely hate it. But props for the effort.
- axelut 8y ago
  It isn't a good or a bad thing, it's just another design system, where you have some rules. We didn't like Material Design either, that's why we took it and made it more user-friendly. The basic idea is that you can take this UI Kit and start playing with some variables to change colors/shadows/typography and create something new, but you don't have to create the whole system from 0. It will save you a lot of time.
  - nik736 8y ago
    Sure, but a framework won't help if the output looks bad because the design system is just horrible UI/UX wise. But great effort, apparently you are not wrong, since Material Design is so wide spread nowadays. But it's just _my_ personal opinion that the "design system" looks absolutely hideous.
    - dpau 8y ago
      I also find Material Design abhorrent. I've read the specs and feel that I understand and agree with Google's motivations for creating such a system, but the result is just plain ugly to me. Material Design has become the "Bootstrap 3" of this generation of websites/webapps, spreading like a virus in part because it's a simple, prepackaged way to quickly add a professional looking design framework to a site. But already now when I come across a Material Design-themed website I feel it's a bit dated, so "2015". Having said all that, I've used a couple Creative Tim bootstrap themes in the past and really liked them, so even if you don't like Material I suggest you look at their other offerings. No financial relationship.
- Numberwang 8y ago
  I've aired this opinion before on this site. Be careful or they will threaten to ban you.
Flavius 8y ago
Is this kit any better than https://material-ui.com/ https://material-ui.com/ when using React?
- yuchi 8y ago
  Sorry to be rude, but simply no. I used both (inherited a Material Kit project and moved it to Material UI), and the quality of MUI is simply astonishing: 1. Releases are very thoroughly cut 2. The APIs are very well designed 3. The result is incredibly professional
  - jefozabuss 8y ago
    The React version of this Kit is built on top of MUI so I'm kind of confused about this comment.
  - gotrythis 8y ago
    Does the Material UI one have Sketch and Figma files so designers and coders are on the same page? That's a good added value of CreativeTim's offering.
- axelut 8y ago
  @Flavius, our Material Kit React is built on top of Material-UI so it's basically the same thing at the core base, we just give more examples and people spend less time creating a page or a dashboard like this https://www.creative-tim.com/product/material-dashboard-react https://www.creative-tim.com/product/material-dashboard-reac....
seanwilson 8y ago
On the product pages, what's used to collect, store and display the customer reviews? e.g. https://www.creative-tim.com/product/vue-material-kit https://www.creative-tim.com/product/vue-material-kit. Just curious as social proof like this is really useful when you're trying to sell products.
Theodores 8y ago
This is yet more div soup judging by the examples in the Repo and the Wordpress theme. I am struggling to find anything that is using HTML5, CSS Grid, CSS variables and other niceties of evergreen browsers the right way. It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js. I want the sensible features in modern evergreen browsers without these options of increasing div soup or increasing complexity. We can now have a true separation of content from styling and scripting with design being content first rather than visual mockups and placeholders. The problem is that to start using the modern good stuff requires unlearning the bullshit that has gone on ever since the browser wars, nobody is giving up on the hacks, the frameworks and the complexity to do it properly with succinct content, succinct styling and straightforward scripts. Everyone is telling themselves they work on a team building products that are far too complex for any chance of going forward to more sensible document markup. The days of div soup are not over - as exemplified by what we have here - but, once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.
- dmitriid 8y ago
  > It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js. css in js will not save you from div bloat. Div bloat exists because CSS+HTML are horrendously bad at actual layout. For any sufficiently complex component you'll have div soup, and newer CSS features reduce the bloat only ever so slightly. > nobody is giving up on the hacks New frameworks have very few if any hacks leftover from the browser wars. The framework discussed here uses flexbox almost exclusively. It doesn't mean you don't need dozens of other hacks to display anything more complex that text. > once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it. Yeah, no. Div soup is here to stay, because it's literally the only foundational layout element of HTML.
  - Theodores 8y ago
skilled 8y ago
Material Design ain't got that cosy feel to it.
rsweeney21 8y ago
Wow, such negative comments. Nobody cares that you don't like Material Design. /rant This looks awesome! As a designer and engineer, it's always frustrating when I design something that turns out to be next to impossible to do with the component library we've chosen to use. Having such a comprehensive set of design platforms and web frameworks covered here solves that problem for us. Thank you for building this! BTW, if you haven't tried Figma, you really should. It's cross platform and even runs perfectly smooth in your browser. On that note, @axelut - it would be nice if there was a link to open the Figma UI Kit, so I could preview it in browser, rather than having to download it first.
- axelut 8y ago
  Thank you for the feedback, glad that you see this useful. I agree that Figma is getting better and better, that's why we started to work with it. Please check this link: https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material-Kit-Free?node-id=0%3A1 https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material... and let me know if it is fine.
nathan11 8y ago
This looks really nice, thanks for building it.
typon 8y ago
Using Material design always feels so sluggish. Is it the shadows? Can someone with more CSS knowledge speculate about what's causing the high latency?
- pault 8y ago
  Last time I paid attention drop shadows were extremely expensive to render, and using too many of them would severely reduce the framerate when scrolling and animating elements. I stopped using them partly because of that, and partly because I find them garish anyway and I haven't found a situation where they improved usability more than just using slightly different colors for foreground and background. I know material design uses them to indicate z-level and to differentiate UI elements from content, I just don't think it's the only way to do so.
- dmitriid 8y ago
  It's the shadows and the unnecessary animations for every single interaction.
mr_overalls 8y ago
I'm an enthusiast of early 20th century architecture schools like Art Deco, Prairie Style, Streamline Moderne, and Danish Modern (for furniture & housewares) because the clean lines and geometric shapes can function as a design philosophy in a variety of areas. And obviously, web aesthetics like Material Design already reflect the ideas of Bauhaus and other schools. But has anyone tried to replicate the "feel" of specific architectural approaches in their web design? For example, how would Frank Lloyd Wright design a website? Is it possible to incorporate more organic approaches like Art Nouveau without producing too much distracting visual clutter? Put another way, what architectural/design movements could provide inspiration for the next evolution of web design? And as further food for thought, wouldn't widespread use of AR/VR would serve to strengthen the link between architecture and human-computer interaction? Your personal computing environment could become an actual space - in the architectural sense - in which to do work. The first thing I'm going to do, of course, is replicate the Johnson Wax Factory's Great Workroom. https://goo.gl/PF665e https://goo.gl/PF665e
- fermienrico 8y ago
  Architectural movements such as Brutalism are already making their way into web design - not in a good way, imho. They’re distractions. Web-design in my view should follow Swiss layout and typography which is widely considered to be the most objective, neutral, clear and universal theory of graphic design. Some parts of Swiss layout already permeate in everything we do - Grid system(Brockmann et al) for example. Or Helvetica and Univers in typography (Frutiger et al). Everything else is decoration. Obviously, if you build a website for a music band, then all bets are off. My view is about common web design.
  - fwip 8y ago
    Why are "objective" and "neutral" desirable traits for most web pages?
    - TeMPOraL 8y ago
      To steal terms from Tufte: mostly data ink, minimum chartjunk.
francislavoie 8y ago
This isn't following the latest Material spec. For example, see the text inputs; they went away with the underlined fields style (for some good reasons). I'd love to see that updated, then I might consider using it.
- ravenstine 8y ago
  People could just import the individual Material web components, rather than trust any number of 3rd parties to keep their own remake of Material design up to date. https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...
LearningCoding 8y ago
A little off-topic, but I'm learning CSS and this seems like as good a place as any to ask: What are the alternatives to material design (which I think I understand is a certain aesthetic that incorporates shadows and textures)? Is flat design the only main alternative in modern web design, or are there others? Secondly, the online course I am doing is using fluid grid but I understand that flexbox is another option. Am I better off focusing on one or the other? Thanks.
- deltron3030 8y ago
  There are others like the HIG (Human Interface Guidelines) from Apple. The ones that are in the open are more like full design systems meant for internal use and prestige. You can find a list of systems on this page: https://adele.uxpin.com https://adele.uxpin.com To use shadows for the z-index and layers is quite common these days though, many systems use them. Flat could be just a step after "inset" and before "raised" within a system like that, something you use for normal backgrounds and stuff that are part of the background. The most basic element in a design system is essentially just an empty frame/box that could hold a shape and color, and optionally a shadow on a shape. This frame could become anything.
- egypturnash 8y ago
  The only alternative to flat design that will not get you mocked is ironic Geocities aesthetic. Designing something with accents that feel solid and dimensional yet balanced and thougtful is right out, and will probably be sneered at by other “designers”, unless you are designing a video game UI. Whether or not end users will welcome this is an open question. Everything is boring and flat now, usually on a glaring white background, and maybe that means the field is ripe for a change. Personally I’m beginning to miss all the design accents that aggressive minimalists deride as “skeuomorphic”.
johnisgood 8y ago
Feels really sluggish.
kevin_thibedeau 8y ago
So you have to upgrade to Pro to get documentation and SASS sources?
bsimpson 8y ago
I love that people make and share things, and I hate to pour water on announcements. I admire the effort that went into this. That said, it makes me sad to see more fragmentation in the Material space. When Material launched, it was a set of design guidelines. A bunch of open source teams (like Material UI) stepped up and put together libraries that implemented those guidelines for specific view frameworks. This project looks like one of those efforts. Since then, the Material Components for the Web project has formed. It's staffed by Google engineers who collaborate with the designers who write the Material Guidelines. They faithfully implement the Guidelines and makes updates as necessary to keep pace with design changes. The project is designed to be wrapped by other libraries to work with specific view frameworks. I'd hope that any Material library for the web that's put together in 2019 would leverage that work. It will more faithfully follow the guidelines and be easier to maintain over time, because there's already a team of people responsible for maintaining the underlying framework. If you haven't already, take a look at Material Components for the Web. You might have a better time if you back Material Kit with it. https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...

193 points by axelut 8y ago

Hey guys, the UI kit comes also in Figma, Sketch, Photoshop and Wordpress, you can check more about it here: https://demos.creative-tim.com/material-kit/presentation.html https://demos.creative-tim.com/material-kit/presentation.htm... You can use it for commercial or open source applications as it is released under MIT License. If you have feedback please let us know.

deleted 8y ago
[deleted]
gotrythis 8y ago
Hi. I came to say it would be great if it was only available in Figma or Sketch files. Perhaps you should add that in your comparison between the regular and pro.
sambroner 8y ago
This is an amazingly comprehensive project. What about your architecture lets your support so many frameworks?

avinium 8y ago

I came across the Vuetify dashboard the other day for a side project I'm spinning out (http://www.sweephq.com http://www.sweephq.com - may or may not open source, haven't decided yet). There are some fantastic themes/UI components here. Great job.

axelut 8y ago
Hi, thank you for the kind words and congrats for the product. If you do it open source we can let our users know about it, maybe somebody can use it. We should keep in touch as we are working on some email templates that will also be release under MIT license. Ping me at alex@creative-tim.com :D
- avinium 8y ago
  The e-mail templates also sound like a logical fit - will certainly drop you an e-mail if I decided to release OSS!
tyteen4a03 8y ago
Vuetify is so easy to work with. Sure some docs are missing and I don't like some of the default styling but it gives you the ability to write good SPAs with very little effort.

nik736 8y ago

I still don't understand what's so good about Material Design, I absolutely hate it. But props for the effort.

axelut 8y ago
It isn't a good or a bad thing, it's just another design system, where you have some rules. We didn't like Material Design either, that's why we took it and made it more user-friendly. The basic idea is that you can take this UI Kit and start playing with some variables to change colors/shadows/typography and create something new, but you don't have to create the whole system from 0. It will save you a lot of time.
- nik736 8y ago
  Sure, but a framework won't help if the output looks bad because the design system is just horrible UI/UX wise. But great effort, apparently you are not wrong, since Material Design is so wide spread nowadays. But it's just _my_ personal opinion that the "design system" looks absolutely hideous.
  - dpau 8y ago
    I also find Material Design abhorrent. I've read the specs and feel that I understand and agree with Google's motivations for creating such a system, but the result is just plain ugly to me. Material Design has become the "Bootstrap 3" of this generation of websites/webapps, spreading like a virus in part because it's a simple, prepackaged way to quickly add a professional looking design framework to a site. But already now when I come across a Material Design-themed website I feel it's a bit dated, so "2015". Having said all that, I've used a couple Creative Tim bootstrap themes in the past and really liked them, so even if you don't like Material I suggest you look at their other offerings. No financial relationship.
Numberwang 8y ago
I've aired this opinion before on this site. Be careful or they will threaten to ban you.

Flavius 8y ago

Is this kit any better than https://material-ui.com/ https://material-ui.com/ when using React?

yuchi 8y ago
Sorry to be rude, but simply no. I used both (inherited a Material Kit project and moved it to Material UI), and the quality of MUI is simply astonishing: 1. Releases are very thoroughly cut 2. The APIs are very well designed 3. The result is incredibly professional
- jefozabuss 8y ago
  The React version of this Kit is built on top of MUI so I'm kind of confused about this comment.
- gotrythis 8y ago
  Does the Material UI one have Sketch and Figma files so designers and coders are on the same page? That's a good added value of CreativeTim's offering.
axelut 8y ago
@Flavius, our Material Kit React is built on top of Material-UI so it's basically the same thing at the core base, we just give more examples and people spend less time creating a page or a dashboard like this https://www.creative-tim.com/product/material-dashboard-react https://www.creative-tim.com/product/material-dashboard-reac....

seanwilson 8y ago

On the product pages, what's used to collect, store and display the customer reviews? e.g. https://www.creative-tim.com/product/vue-material-kit https://www.creative-tim.com/product/vue-material-kit. Just curious as social proof like this is really useful when you're trying to sell products.

Theodores 8y ago

This is yet more div soup judging by the examples in the Repo and the Wordpress theme. I am struggling to find anything that is using HTML5, CSS Grid, CSS variables and other niceties of evergreen browsers the right way. It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js. I want the sensible features in modern evergreen browsers without these options of increasing div soup or increasing complexity. We can now have a true separation of content from styling and scripting with design being content first rather than visual mockups and placeholders. The problem is that to start using the modern good stuff requires unlearning the bullshit that has gone on ever since the browser wars, nobody is giving up on the hacks, the frameworks and the complexity to do it properly with succinct content, succinct styling and straightforward scripts. Everyone is telling themselves they work on a team building products that are far too complex for any chance of going forward to more sensible document markup. The days of div soup are not over - as exemplified by what we have here - but, once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it.

dmitriid 8y ago
> It is almost as if web development has forked into two paths, one path being div soup bloat and the other being increasingly more complex build tools to arrive at the logical arrival of css in js. css in js will not save you from div bloat. Div bloat exists because CSS+HTML are horrendously bad at actual layout. For any sufficiently complex component you'll have div soup, and newer CSS features reduce the bloat only ever so slightly. > nobody is giving up on the hacks New frameworks have very few if any hacks leftover from the browser wars. The framework discussed here uses flexbox almost exclusively. It doesn't mean you don't need dozens of other hacks to display anything more complex that text. > once the good stuff has been discovered and the evergreen friendly stuff learned there is no going back to div soup and the working methods that go with it. Yeah, no. Div soup is here to stay, because it's literally the only foundational layout element of HTML.
- Theodores 8y ago

skilled 8y ago

Material Design ain't got that cosy feel to it.

rsweeney21 8y ago

Wow, such negative comments. Nobody cares that you don't like Material Design. /rant This looks awesome! As a designer and engineer, it's always frustrating when I design something that turns out to be next to impossible to do with the component library we've chosen to use. Having such a comprehensive set of design platforms and web frameworks covered here solves that problem for us. Thank you for building this! BTW, if you haven't tried Figma, you really should. It's cross platform and even runs perfectly smooth in your browser. On that note, @axelut - it would be nice if there was a link to open the Figma UI Kit, so I could preview it in browser, rather than having to download it first.

axelut 8y ago
Thank you for the feedback, glad that you see this useful. I agree that Figma is getting better and better, that's why we started to work with it. Please check this link: https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material-Kit-Free?node-id=0%3A1 https://www.figma.com/file/bvQEB3MNOzDx5KrBWLZmmIre/Material... and let me know if it is fine.

nathan11 8y ago

This looks really nice, thanks for building it.

typon 8y ago

Using Material design always feels so sluggish. Is it the shadows? Can someone with more CSS knowledge speculate about what's causing the high latency?

pault 8y ago
Last time I paid attention drop shadows were extremely expensive to render, and using too many of them would severely reduce the framerate when scrolling and animating elements. I stopped using them partly because of that, and partly because I find them garish anyway and I haven't found a situation where they improved usability more than just using slightly different colors for foreground and background. I know material design uses them to indicate z-level and to differentiate UI elements from content, I just don't think it's the only way to do so.
dmitriid 8y ago
It's the shadows and the unnecessary animations for every single interaction.

mr_overalls 8y ago

I'm an enthusiast of early 20th century architecture schools like Art Deco, Prairie Style, Streamline Moderne, and Danish Modern (for furniture & housewares) because the clean lines and geometric shapes can function as a design philosophy in a variety of areas. And obviously, web aesthetics like Material Design already reflect the ideas of Bauhaus and other schools. But has anyone tried to replicate the "feel" of specific architectural approaches in their web design? For example, how would Frank Lloyd Wright design a website? Is it possible to incorporate more organic approaches like Art Nouveau without producing too much distracting visual clutter? Put another way, what architectural/design movements could provide inspiration for the next evolution of web design? And as further food for thought, wouldn't widespread use of AR/VR would serve to strengthen the link between architecture and human-computer interaction? Your personal computing environment could become an actual space - in the architectural sense - in which to do work. The first thing I'm going to do, of course, is replicate the Johnson Wax Factory's Great Workroom. https://goo.gl/PF665e https://goo.gl/PF665e

fermienrico 8y ago
Architectural movements such as Brutalism are already making their way into web design - not in a good way, imho. They’re distractions. Web-design in my view should follow Swiss layout and typography which is widely considered to be the most objective, neutral, clear and universal theory of graphic design. Some parts of Swiss layout already permeate in everything we do - Grid system(Brockmann et al) for example. Or Helvetica and Univers in typography (Frutiger et al). Everything else is decoration. Obviously, if you build a website for a music band, then all bets are off. My view is about common web design.
- fwip 8y ago
  Why are "objective" and "neutral" desirable traits for most web pages?
  - TeMPOraL 8y ago
    To steal terms from Tufte: mostly data ink, minimum chartjunk.

francislavoie 8y ago

This isn't following the latest Material spec. For example, see the text inputs; they went away with the underlined fields style (for some good reasons). I'd love to see that updated, then I might consider using it.

ravenstine 8y ago
People could just import the individual Material web components, rather than trust any number of 3rd parties to keep their own remake of Material design up to date. https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...

LearningCoding 8y ago

A little off-topic, but I'm learning CSS and this seems like as good a place as any to ask: What are the alternatives to material design (which I think I understand is a certain aesthetic that incorporates shadows and textures)? Is flat design the only main alternative in modern web design, or are there others? Secondly, the online course I am doing is using fluid grid but I understand that flexbox is another option. Am I better off focusing on one or the other? Thanks.

deltron3030 8y ago
There are others like the HIG (Human Interface Guidelines) from Apple. The ones that are in the open are more like full design systems meant for internal use and prestige. You can find a list of systems on this page: https://adele.uxpin.com https://adele.uxpin.com To use shadows for the z-index and layers is quite common these days though, many systems use them. Flat could be just a step after "inset" and before "raised" within a system like that, something you use for normal backgrounds and stuff that are part of the background. The most basic element in a design system is essentially just an empty frame/box that could hold a shape and color, and optionally a shadow on a shape. This frame could become anything.
egypturnash 8y ago
The only alternative to flat design that will not get you mocked is ironic Geocities aesthetic. Designing something with accents that feel solid and dimensional yet balanced and thougtful is right out, and will probably be sneered at by other “designers”, unless you are designing a video game UI. Whether or not end users will welcome this is an open question. Everything is boring and flat now, usually on a glaring white background, and maybe that means the field is ripe for a change. Personally I’m beginning to miss all the design accents that aggressive minimalists deride as “skeuomorphic”.

johnisgood 8y ago

Feels really sluggish.

kevin_thibedeau 8y ago

So you have to upgrade to Pro to get documentation and SASS sources?

bsimpson 8y ago

I love that people make and share things, and I hate to pour water on announcements. I admire the effort that went into this. That said, it makes me sad to see more fragmentation in the Material space. When Material launched, it was a set of design guidelines. A bunch of open source teams (like Material UI) stepped up and put together libraries that implemented those guidelines for specific view frameworks. This project looks like one of those efforts. Since then, the Material Components for the Web project has formed. It's staffed by Google engineers who collaborate with the designers who write the Material Guidelines. They faithfully implement the Guidelines and makes updates as necessary to keep pace with design changes. The project is designed to be wrapped by other libraries to work with specific view frameworks. I'd hope that any Material library for the web that's put together in 2019 would leverage that work. It will more faithfully follow the guidelines and be easier to maintain over time, because there's already a team of people responsible for maintaining the underlying framework. If you haven't already, take a look at Material Components for the Web. You might have a better time if you back Material Kit with it. https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...