
Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js - axelut
https://github.com/creativetimofficial/material-dashboard
======
TimMurnaghan
Do people actually like Material for browsers on desktops? I tried it - as it
would be great to have an opinionated design language with good framework
implementations but it seems to make the same mistake as Windows 8 in trying
to treat everything like a phone. That really isn't nice on a desktop.

~~~
Mister_Snuggles
One of the banks I used "updated" their iOS app and used Material Design. It's
infuriating.

The thing that bothers me the most is the "switches" (3rd example here[0]). My
first thought upon updating the app was "Why did they reinvent the toggle
switch when iOS has a perfectly good one built in?" Being bothered by this is
irrational, yet I'm bothered by it all the same.

I also find the ripple effect[1] when pressing things to be infuriating. Just
do the action I've asked, don't do this animation and delay the action by half
a second. Again, this is somewhat irrational, but it still bothers me.

Perhaps the thing that bugs me the most is that it feels like I have a really
well-designed Android app on my phone. The problem though is that I have an
iPhone. If I wanted to use Android apps, I would have bought an Android phone.

[0] [https://material.io/design/components/selection-
controls.htm...](https://material.io/design/components/selection-
controls.html)

[1]
[https://material.io/design/interaction/states.html#pressed](https://material.io/design/interaction/states.html#pressed)

~~~
bhauer
> _I also find the ripple effect[1] when pressing things to be infuriating.
> Just do the action I 've asked, don't do this animation and delay the action
> by half a second. Again, this is somewhat irrational, but it still bothers
> me._

It is not irrational to want your device and the software you use on it to be
as high-performance as possible. In my opinion, unless we're talking about a
game, software should always avoid wasting the user's time, no matter how
briefly. Of course, if an animation is playing while something else is
happening, that is acceptable. But in many cases, applications wait for the
animations to complete (because it's "only" 300 milliseconds) before
proceeding with the requested action. Disrespecting the user's time is
disrespecting the user, full stop.

~~~
reaperducer
Yes, and no.

While nobody likes excessive animation, it is very important to let the user
know their input was received. It's why the cursor changes on mouseover. It's
how you know if the app is crashed, or merely processing something you
requested.

I've seen a million times in UX testing where ordinary people go click...
wait... click click click click click because they didn't receive any feedback
to an action.

At one time this was one of Apple's UI priorities — feedback. Unfortunately,
Apple has gotten away from a lot of its core UI values without a strong
personality to enforce them.

 _> full stop_

In the real world, nothing is ever "full stop." You should purge that phrase
from your lexicon.

~~~
WorldMaker
> In the real world, nothing is ever "full stop." You should purge that phrase
> from your lexicon.

Not to get further off topic, but: Huh? "Full stop" just means "end of
message". It's an amusing leftover from telegraph technologies that people
sometimes use for emphasis, but it doesn't have a literal meaning more than
just "end of message".

~~~
kickopotomus
It is interesting how the phrase's meaning has transformed. Nowadays people
generally use it to add emphasis such that the previous statement is an
absolute truth with no valid argument to the contrary.

~~~
jrochkind1
end of statement. nothing more to be said. no exceptions or reasonable
argument to the contrary.

------
dom96
I basically associate material design with "slow" now, especially ever since
Google has began to move all their services (flights, analytics) to material
design. It's all becoming slow and annoying to use, anyone else feel the same?

~~~
citrusui
I feel the same way - especially with Google Drive. It takes a good 2 or 3
seconds to get a response from the UI when right-clicking. Also, it takes 4-5
seconds for Drive to realize when I'm dropping files or folders. Not sure if
these issues are new or specific to Material per say, though.

~~~
jonpaine
4-5 seconds on your machine? Check for a button usually next to the power
button on the CPU labeled “turbo” and give it a click. Might help.

------
dqv
Hi. This is really cool and I can tell you put a lot of work into it.

I noticed when tabbing through the dashboard that many of the elements have
disabled focus styles. This can make the dashboard less accessible to users
who need visual indication of what element is focused. Would you consider
including focus styles on the non-form elements?

~~~
jamestimmins
This comment is how all suggestions/comments/constructive criticism should be
given when someone shares something they worked on (online or elsewhere).

1\. Acknowledge the positives.

2\. Acknowledge the effort/work put in.

3\. Introduce your idea as something to consider, with the knowledge that they
may have already considered it, and have a good reason for going a different
direction.

Kudos!

------
thomasfedb
I dunno, looks slick but I do wonder how much of this is actually useful for
building an admin interface.

Once I've got decent form styles and a navbar I find that most of the rest is
either very simple, or very application specific.

Widgets are cool, but mostly we need tables and forms.

~~~
porker
> Widgets are cool, but mostly we need tables and forms.

This (though I agree with sibling comment about a few more being useful).

I reviewed 20 popular admin themes last month for our startup, and was v
disappointed with them. Either due to code quality, or throwing in loads of
useless widgets which are more consumer rather than business oriented.

There's a gap for a theme that's more like Stripe's dashboard, not these
heavy-left-hand-menu dashboard themes. Or something like VMWare's Clarity
Design System
([https://vmware.github.io/clarity/](https://vmware.github.io/clarity/))

Something corporate.

~~~
d0100
I would definitely use clarity, if only it where React.

~~~
porker
Or Vue. I used Angular 2 for a mobile app (Cordova/Ionic) and while it was OK,
I'd rather not use it again.

------
mynegation
I strongly do not like the design. To my taste:

    
    
      * colors are too bright and saturated
      * Low text-vs-background contrast: white letters on bright yellow-orange for example
      * Font strokes are way too thin which is especially bad compounded with dark-ish gray on light-ish gray low contrast (see above)
    

Viewing this on a usual normal-resolution 24" Dell monitor. It could be that
it looks better on retina phones and monitors - can someone opine?

I would prefer something like [1] (not ideal, but found this just after 5
seconds of googling)

[1]
[https://p.w3layouts.com/demos_new/template_demo/06-01-2018/g...](https://p.w3layouts.com/demos_new/template_demo/06-01-2018/glance_design_dashboard-
demo_Free/215073379/web/index.html)

------
burnt1ce
Nice theme. I like how it uses the big 3 FE frameworks.

Big shout out to Ngx-Admin as well. [https://github.com/akveo/ngx-
admin](https://github.com/akveo/ngx-admin)

~~~
axelut
Congrats! Are you the owner of that dashboard? Maybe we can join our forces :D

~~~
burnt1ce
Nope, but I wish I was.

------
Oras
Looking much better and easier than many paid admin themes. I was checking it
yesterday after reading about it on a website and was really impressed. All
the best

~~~
axelut
Thanks, man! Appreciate.

~~~
qorrect
Appreciate you! Here is one project I used Creative Tim dashboard for
[https://github.com/qorrect/sisy](https://github.com/qorrect/sisy) ,
screenshots at bottom.

------
iatek
Nice work happening at Creative Tim! Congrats to Alex and company. I'm looking
forward to collaborating on Codeply. Please check out my latest too :
[https://themesguide.github.io/top-
hat/dist/](https://themesguide.github.io/top-hat/dist/)

~~~
axelut
Hi Carol, thank you for the kind words and congrats on the latest themes. I
really like what I see there with the "copy code" straight from the interface.
We will start "cooking" something together soon. Talking on email!

------
buraksarica
Nice work. There is a tiny glitch on first load on windows with chrome. The
content shakes in order to fit screen. It may be about hiding the default
scroller.

~~~
axelut
yep, I see that now, you are right. Probably it would be better to disable the
default scroller for all the devices and then: on Mac/Ubuntu/iOS/Android we
activate the system scroll (which looks better) and on Windows, we activate
the perfectScrollbar library. We will do an update soon.

------
hardwaresofton
On the topic of UI libraries, I've used and enjoyed Element UI[0].

Someone really needs to make a search engine for components -- React, Vue,
Mithril and a few other frameworks out there are making it so easy to build
and share small isolated pieces of functionality but I still don't know of a
site where I can easily search for components.

[0]: [http://element.eleme.io](http://element.eleme.io)

------
wiradikusuma
I'm using this for my upcoming SaaS, and I'm disappointed with the performance
on mobile.

I thought it's due to React, but after Googling "react material UI slow" I
found that it's the problem with the UI framework. Don't get me wrong, I like
the design, I just regretful of not testing it on my phone much earlier.

------
somada141
Great work on the template. I actually bought the pro version as it has the
most reasonable SaaS license I’ve seen in a lot of these templates where they
pull you in with a 30-40$ license and then want 800-1400$ if you wanna use it
on a product.

~~~
axelut
Really Happy to hear that. If you have further feedback on how to improve it
please let us know!

------
dfee
Tangential: is it (in)appropriate to use an "admin" theme for a consumer app?

Maybe it's semantics, but I see the "feel" of admin pop up on many / most
evolved consumer applications (e.g. GMail, Kayak, Reddit, Feedly, etc.).

------
staticvar
So this is an example of how to use Bootstrap Material Design in different web
frameworks? Why use Bootstrap Material Design instead of the Google supported
Material Component library that works in any framework and without the added
noise of class="foo"? [https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web)

------
jgalt212
I think this is why folks give Material UI so much grief.

[https://en.wikipedia.org/wiki/Principle_of_least_astonishmen...](https://en.wikipedia.org/wiki/Principle_of_least_astonishment)

And I would not be so quick to pat Apple on the back, as I feel they have on
gone backwards vis a vis the above principle when they largely abandonded
skeuomorphism.

------
kbenson
The demo page section for icons[1] is buggy on Firefox. If you scroll the icon
categories, the icon next to each category doesn't move with the category
name.

1: [https://demos.creative-tim.com/material-
dashboard/examples/i...](https://demos.creative-tim.com/material-
dashboard/examples/icons.html)

------
pbreit
Has anyone worked with this or similar starter themes?

Are they easy to work with? Adjust to your own circumstances?

I ask because, while easy on the eyes, they strike me as somewhat complicated
and you wonder if you'd be better off starting from scratch or something
simpler.

------
consumethreads
Why this works for a dashboard but not for anything else:

-design is inheriently unique. You want your brand and your site to standout from the rest. A one size fits all design methology actually goes against design. A design framework for the web is like saying all stores should look the same. Even restaurants dont look the same and they are in the same usecase. Design matters and cannont be churned out like a factory product (or good design at least). There are 2 80/20 rules here. You can get 80% of your good design by adhering to 20% of the standards, yet its the last 20% of good design that makes your site stand out and the first 80% is just basic usability.

-dashboards are purely functional and not user facing (at least the admin dashboards I hope this framework is talking about). This is a great place to use a standard framework and get all the reuse out of it so you can focus on making your user facing site unique

------
novaleaf
what is the relationship of this to Material-UI? [https://material-
ui.com/](https://material-ui.com/)

On the Material-UI website it shows CreativeTim (the creators of Material
Dashboard) as being a major contributor, additionally there is a Material
Dashboard "Premium Theme" for Material-UI that's created by CreativeTim. In
the MaterialUI site's thumbnail comments it says created with MaterialUI, but
on the MaterialDashboard site it does not say this.

Very confusing. did CreativeTim move away from MaterialUI to a bootstrap4
foundation? or something else?

------
electrotype
I'm using Firefox and the "Material Icons" icons are never displayed
properly... Any idea why?

[https://i.imgur.com/Y06PbsL.png](https://i.imgur.com/Y06PbsL.png)

~~~
realusername
strange, it works on my Firefox, maybe you have disabled some custom font
loading settings for privacy?

~~~
electrotype
Even in safe mode, with all add-ons disabled, it still doesn't work... I
should try a clean install maybe.

------
mrtksn
Interesting, the Vue version feels significantly faster then the React
version(drops frames at the beginning of the animations just after a click)
and the Angular version feels much more website-like than app-like

~~~
eat_veggies
It looks like the Angular version doesn't have the fade in/out transitions, so
it feels more like navigating conventional websites via links than just
transitioning states in a javascript SPA.

------
philliphaydon
I’m confused. I’m on my phone so I haven’t looked at the repo. But if this
material done in bootstrap or is this a ui using material? Why is bootstrap
mentioned...

~~~
raziel2p
Nothing stops you from implementing material design using Bootstrap.

------
yellowboxtenant
Great job implementing material design principles to Bootstrap. I would say I
haven't seen it done this well except for I haven't seen it done at all.

------
ricardobeat
Does this actually conform to Material Design guidelines? The use of
shadow/depth seems gratuitous, for example, in the selected item in the left
menu.

------
midoreigh
Everyone is bashing the admin panel. Which one is the best according to HN
based on functionality and design?

~~~
johncomposed
A while ago someone posted
[https://tabler.github.io/tabler/docs/index.html](https://tabler.github.io/tabler/docs/index.html)
which I quite like. But in most of my work I've used UI kits like
[https://ant.design/](https://ant.design/) and [http://element.eleme.io/#/en-
US](http://element.eleme.io/#/en-US).

------
douglaswlance
What's the easiest way to through a Firebase database behind this?

~~~
nostalgeek
Get a grid widget from some actual widget toolkit? no seriously, that's why I
don't really values these dashboards. Because let's be honest they don't come
with actual useful stuff for someone who is developing a LOB that doesn't need
to look like a mobile website.

~~~
axelut
Great feedback man! Do you have any examples that we can check so we can add
some better tables/data structures?

------
swyx
i've been a creative tim customer for a while, great product, fair price. no
complaints :)

not a fan of Material tho, victim of Google's success really.

------
mishingo
This is really ugly

~~~
arbie
Constructive feedback would be useful.

------
billabul
I really don't like light (300 weight) fonts on web. Most of them on most
screens are illegible.

