8 ms·

Tabler: Free and open source dashboard HTML/CSS framework

541 points by jakearmitage 4y ago

speps 4y ago
Changing page in the table at the bottom of the demo scrolls back all the way to the top on mobile (Chrome Android).
- mwiechn 4y ago
  Because this is just a template and most of the elements point to # and would require linking in the code. This is a plain html/css site that just requires putting life into it using javascript or more css :)
newusertoday 4y ago
Thanks for this, this is great resource.
TekMol 4y ago
Why pack so many different things into a single project? If I want to build a dashboard with multiple widgets on the screen, my first step would be to look for a layout tool. Which allows me to handle how the screen is divided into multiple areas and offers an interative interface so I can open, move, resize and close those areas. I would not want a bundle that combines the layout tool with charts and forms and whatnot. For example, if I want an area to be used for an interactive chart, I would want to build that with whatever solution I like best. Personally I already use Plotly for many things, so I would go with that.
- qabqabaca 4y ago
  It's pretty standard for component libraries and/or dashboard templates to cover all the bases for a SaaS dashboard
- atonse 4y ago
  Any examples of "layout tools" you'd recommend?
- puffybeignette 4y ago
  Then use plotly bud. Why rag on tabler though? It’s beautiful and provides devs a quick way to get started on a new project without having to think much about UI and lightly customize and have something that looks very professional. And it’s free.
- jcpst 4y ago
  > Why pack so many different things into a single project? So I can build a dashboard without deciding on a layout tool, then deciding on a solution for charts, etc. I do not consider myself a frontend developer. I'm just not interested in spending time learning about a bunch of UI tools if there's a framework that does it all. This is appealing to me- the less I have to think about the implementation of the presentation layer, the more I can focus on the data processing, persistence, API... the stuff that _I_ care about working on. Not trying to argue, just one answer to your question.
- deleted 4y ago
  [deleted]
- ralgozino 4y ago
  The way I see is that it is for the same reason that Qt and GTK include all the widgets and abstractions to create a complete UI. Another framework that I've used in the past for 2 WebApps projects[1][2] -and I was quite happy with the result- is Semantic-UI (and the fomantic fork)[0] [0] https://github.com/Semantic-Org/Semantic-UI https://github.com/Semantic-Org/Semantic-UI https://fomantic-ui.com/ https://fomantic-ui.com/ [1] https://github.com/sighupio/gatekeeper-policy-manager/tree/v0.5.1#screenshots https://github.com/sighupio/gatekeeper-policy-manager/tree/v... [2] https://github.com/ralgozino/vmtory#screenshots https://github.com/ralgozino/vmtory#screenshots
  - ralgozino 4y ago
    Sorry, I'm from mobile and pressed send to soon. The point of the examples was to say that these frameworks provide you with the building blocks you need to create a webui without too much effort and with consistent (good) looks
- jakearmitage 4y ago
  It's a kitchen sink demo, so we can pick the components we want and just use them without spending hours wiring things together or dealing with conflicts. It's why VB was so successful and Qt as well. I never had to worry about stuff like this in desktop. Or reinvent how a combo box should work for every single project. Some people just want the same for the web.
- manigandham 4y ago
  It's just HTML/CSS so you can already do that. Use what you want from whatever framework you want, but there's a lot of efficiency in one framework providing the vast majority as it's known to work well together and reduces complexity and decision making.
giancarlostoro 4y ago
If you use FastAPI with Tortoise ORM it looks like there's an Admin Interface that uses Tabler: https://github.com/fastapi-admin/fastapi-admin https://github.com/fastapi-admin/fastapi-admin
Waterluvian 4y ago
It’s interesting that it describes the React version as the Single Page Application version. I’ve found that when used competently, React also shines for normal websites both through client or server side rendering.
topicseed 4y ago
It looks neat. Makes me want to build dashboards for a living. Wish there was a Svelte version.
- Kraftwurm 4y ago
  +1 for the Svelte version
clairity 4y ago
it looks like tabler uses jekyll underneath for docs and demo (which i personally like and am comfortable with). the demo is really nice, ahd while i'm not big on js any more, the js driving tabler looks fairly straightforward and appropriate to my eyes. the underlying html and css, however, give me pause about how easy it would be to integrate into a larger project. <div> soup is how i'd describe the demo html, and its css uses custom properties (css variables) in a way that, on first glance, seems to make it more verbose without adding power, flexibility, or maintainability (or accessibility, but that seems a really big challenge for data-heavy frontends like this). i'd probably try this out if i needed a dashboard on a project, but perhaps would want to test drive it on a small/test project to see where the gotchas are first.
- tragictrash 4y ago
  This is the kind of feedback that can really help a developer improve their skills
- jcpst 4y ago
  From what I understand, it should also work ok with more semantic html elements. But it would be nice to see maybe a little of that in the examples.
  - krsdcbl 4y ago
    Basically even if it's not built in, adding a reset stylesheet underneath it would make it work with semantic tags just like with divs, so no worries about that. then again, you'd probably not have to care about semantic structure in dashboards anyways, as it's unlikely SEO is a concern. Might be worth considering for accessibility though.
    - jcpst 4y ago
      I liked the look of this enough for certain products ideas that I would just use this as customer facing!
- EthicalSimilar 4y ago
rickreynoldssf 4y ago
But I don't have enough room on my laptop for another sticker!
asdvasewe 4y ago
I have been using Apache Superset on top of sqlite for my personal use, and am fairly happy with it. Any advantages/disadvantages of Tabler compared to Superset?
- sgt 4y ago
  For reporting and BI? How does it perform and how is shareability?
- samstave 4y ago
  Can you share how youre using it personally?
  - asdvasewe 4y ago
    - personal finances - get statement exports to sqlite db and I have dashboards to manage expenses/finances, retirement account data in sqlite and charts for actual and projections - my car - I collect data in sqlite db - amortization schedule/actuals for the loan, fuel/maintenance expenses etc. Dashboards on top of it with metrics such as $ spent, miles, cost of finance, cost of ownership (per mile) etc. - workouts - I used enodomondo but they shut down and I had a data dump, I currently use garmin. So I get all the data to sqlite and drive a dash with overall work out stats over years across platforms.
    - samstave 4y ago
      Thanks! Can you share screens of your car dashboard, this sounds like a marketable simple one-page web-app that people would sign up for an use... But then you'll get millions of users and you'll have to learn postgress and a range of other meta-metrics to track your uptime and availability 9s to your constituent users....
      - asdvasewe 4y ago
        Right now I just have a raspi hosting superset and sqlite for me and I use it locally, its not out in the open. However, based on my experience, the metrics and dashboard for the car are not very hard to do, the biggest factor imo is the discipline of data collection, get receipts and insert data to the db for each refuel, maintenance, parts, registrations, insurance etc. If you miss collecting data, the data/insights aren't as useful anymore. Maybe scanning receipts and ocr is the next step, that's on my roadmap, when I find time that is :)
la_fayette 4y ago
From what I understand, tabler is just a UI template. So if you want build a dashboard application, you have to build all things, like user management, visualizations etc yourself? I am a happy user of grafana. All things are there. Tabler looks good and also the responsive UI is really cool, but building all the backend for a dashboard application will be a challenging endeavour. Using grafana or metabase seems fine...
- cweagans 4y ago
  in the context of a ui kit, "dashboard" is not the same thing as what grafana gives you. it's more of a dashboard as in the ui that you get after you log in to some saas app.
EugeneOZ 4y ago
Nowadays design language of your framework should look at least not worse than Material Design 3 or Twitter Bootstrap (just because they are there and you can learn from them). This project needs some more effort to achieve it, right now it looks like it was designed 5 years ago.
- Nextgrid 4y ago
  What problems do you see? Personally I like it and "not looking like Material Design" is something I'd consider a feature.
  - EugeneOZ 4y ago
    I expressed what problems I see - their design looks outdated and doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive). You misunderstood me: I wasn't saying that their design should look like Material Design 3. I said it should look better and take into account all the lessons we learned from Twitter Bootstrap, Material Design, and other sources. Otherwise, there are no reasons to use it.
    - dmitriid 4y ago
      > their design looks outdated Define "outdated". It looks similar to literally any other modern UI framework with the exception that it focuses on dashboard/backoffice functionality (almost none of the UI frameworks do) > doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive). Yes, that is maybe a problem. Depending on what exactly you need. I've yet to see a single UI framework that offers both a consistent set of good dashboard/backoffice elements and a good mobile experience (because it's actually hard to do). And Material is emphatically not a good example.
    - barnabee 4y ago
      Material Design looks awful to me. I quite like this. The elements in the demo are also definitely not too small for my taste. On my iPhone 13 Pro I actually think the demo looks best at 85% and it is still perfectly usable at that zoom level on a touchscreen. Everything is too damn big on mobile sites, which is ludicrous considering the tiny screens.
willcodeforfoo 4y ago
I love Tabler and have used it for a few projects with great success. The title of the OP is not really accurate though. It's not so much a framework but a bunch of customization on top of Bootstrap and some pre-built templates for stuff _like_ dashboards, galleries, forms, etc. The site is more like a kitchen sink demo and documentation site for stuff you can pick apart and use in your own application.
- mbreese 4y ago
  Thank you for adding this. I love the look of this project and was quite excited. But I couldn't figure out how one would actually get started creating a site with it. Now I get it...
- EthicalSimilar 4y ago
  Completely agree with your sentiment. It has been incredibly refreshing to use Tabler on my projects in comparison to the norm ("admin dashboard" templates) that tend to fight you when you don't follow their pre-defined layout, or when you want to extend the UI kit with your own components without having to re-implement the styling used by the kits.
- ahmed_ds 4y ago
  How do you approach building on top of a dashboard template? > Any change in /src directory will build the application and refresh the page. Do you start from the demo page and start ripping off components that you don't need? Or do you pick specific parts from the template and build it from scratch from bottom up? Even though templates seem to be an easy way to build stuff, I never understood the approach building from templates.
  - EthicalSimilar 4y ago
    In this instance, think of it less as a template and more of a UI Kit. The demo is just there to showcase what's available in the kit. Dashboards are usually quite unique depending on the data they display and purpose of them, so just ripping the demo isn't necessarily going to be the best approach to go with. In my case I'd start with choosing a layout and throwing together a rough sort of navigation menu, and then building each page by scratch (or based off previous pages). It's as simple as browsing the demo to find which components you need and then just copy / pasting them, either directly from the demo page or from the documentation. The only times I've ripped entire pages have been for auth pages, error pages, etc - i.e. pages that are usually quite common to all applications. I find that it's better to take a standardised approach for these pages as it's more intuitive for the users rather than reinventing the wheel.
pelagicAustral 4y ago
I love Tabler. I've used it for a few Rails projects and since Rails 7 it's even easier to integrate thanks to Import Maps. I can get a project off the ground even faster with this UI kit. I'm already used to the Bootstrap classes and tags so this is just the final component for maximum productivity. I get some people don't dig the design but I think it look serious, and in general that's what dashboard are for, serious business. They need to be readable and simple to understand and use. Tabler gives that vibe. Edit: As an afterthought, I would really appreciate if anyone knows any similar projects. It'd nice to compare and have more options. So far I havent found anything so compelling in this space.
- 13324 4y ago
  You could have a look at AdminLTE (https://adminlte.io/ https://adminlte.io/).
- metadat 4y ago
  Does is also play nice with Python, Go, or Rust? Never heard of import maps until now, not immediately clear what they obviate. https://blog.appsignal.com/2022/03/02/import-maps-under-the-hood-in-rails-7.html https://blog.appsignal.com/2022/03/02/import-maps-under-the-...
  - pelagicAustral 4y ago
    Yeah, the import maps comment mainly stems from a personal hatred against Webpacker. Wiring everything together was quite more tedious before Rails 7. I would think it does, at least with Django I know you can also automate the project creation with a script and get to coding straight away, not sure about frameworks for Go or Rust but I'd figure it be more or less the same.
- thrownaway561 4y ago
  FYI there is a gem for tabler and rails https://github.com/lightyrs/tabler-rubygem https://github.com/lightyrs/tabler-rubygem there is also a pull request for integration with Rails 6 https://github.com/tabler/tabler/issues/822 https://github.com/tabler/tabler/issues/822
ocdtrekkie 4y ago
Never used Tabler itself, but I am an absolute loyalist for using their icons, which are all MIT licensed and available in SVG. https://github.com/tabler/tabler-icons https://github.com/tabler/tabler-icons
- clairity 4y ago
  nice, i may have to look into using these for my personal css framework project. i'm still not sold on svg as an unalloyed good over font icons (as they're really verbose and cluttery in markup), but they do have some good points as well (e.g., multi-color and css-able).
  - ocdtrekkie 4y ago
    To me, the key point about having the SVGs is they're basically the "source code". Whether you want to use SVGs directly or not, you can, and you have all of the tools to make high-quality custom icons using the same shapes.
tofuahdude 4y ago
Has anyone used this in a Phoenix LiveView project by chance?
- dmitriid 4y ago
  I have. Works well (I would inspect examples on the demo site and copy-paste them wholesale). I switched to Tailwind templates though because they suited me better. And honestly I couldn't (be bothered to) figure out how to only use the CSS required, not the whole bundle, with Tabler.
  - tofuahdude 4y ago
    Do you just bundle Tabler's JS into Phoenix asset pipeline and let it do its thing naively in the browser? I guess most the JS is just visual changes, but i wonder if that brings live view out of sync with the dom.
    - dmitriid 4y ago
      Ah. I haven't used anything that required JS. Just the purely visual components like tables, stats etc.
  - 2mol 4y ago
    Which templates do you use?
    - dmitriid 4y ago
      I've shelled out $$ for https://tailwindui.com/ https://tailwindui.com/ Currently using their components, but will (re-)use Primer for a private project https://tailwindui.com/templates/primer https://tailwindui.com/templates/primer
      - thejosh 4y ago
        Yeah tailwind ui components are great, especially for liveview. Surface (liveview templating) makes it super easy as well.
Lorin 4y ago
Based on demo site: doesn't seem to have a 'tag' input UI, only single input item switching. Additionally, some accessibility concerns re: contrast/highlighting.
Willish42 4y ago
Wow, this is really great! I love the design and especially the sophistication of that demo page. Really powerful and professional looking stuff.
- deleted 4y ago
  [deleted]
babyshake 4y ago
Are there any good reasons to use this instead of Tailwind? Is it mainly just the look of the components?
- jcpst 4y ago
  Way less work? Tailwind is on a lower level of abstraction than this.
  - mosselman 4y ago
    Haha to me Tailwind feels like it is on an even lower level of abstraction than vanilla CSS. So I'd expect something like Tabler to be a good way to quickly start somewhere. The better question would be: "What is the difference between Tabler and using Bootstrap or Bulma or some other framework?"
bilsbie 4y ago
Anyone want to explain this like I’m a cgi-bin developer from 2004?
- tofuahdude 4y ago
  Websites are made with html and css (and frequently 15mb of javascript) This is a package of pre-formatted and pretty html and css, with a small amount of javascript, built on top of another package of pre-formatted and pretty html and css, with a small amount of javascript.
corbin 4y ago
I've used this for a couple of projects now and like it. But am not a fan of the current trend of spaced out layouts. Visually they look good but in practice for information dense pages it is difficult to fit everything in. Maybe it is bad design on my part but I'd prefer a web layout that looks more like a desktop application (think Photoshop or Visual Studio)
- taspeotis 4y ago
  Maybe https://blueprintjs.com/ https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)
mulmen 4y ago
I hate this modern design trend of wasting as much of my screen real estate as possible. It's ugly and it wastes my time, which is rude. Every one of these tables is literally 300% taller than it needs to be. Get rid of all the pointless padding and spaces. You can pack 3x the information on screen. This looks "modern" but it doesn't look good and it certainly isn't useful. Every time I bring this up in UX review designers look at me like I'm from the moon. In the "Invoices" table in the preview seven hundred vertical pixels are used to display eight lines of data. That's worse than a VT100 by a factor of three. https://preview.tabler.io/ https://preview.tabler.io/
- pjgalbraith 4y ago
  There are designers that appreciate the distinction between the way you design a desktop application vs a consumer website / mobile app. A lot of the design literature and discussion seems to be focused on the latter these days. A lot of things that desktop applications did are missing in most web apps; high information density, resizable panels, panel layouts (side by side etc...), keyboard shortcuts, embedded CLI's, and so on. It makes the user experience a lot worse for power users.
  - sodality2 4y ago
    Designers optimize for the common customer, which does _not_ want keyboard shortcuts or embedded CLI's etc.
    - pjgalbraith 4y ago
      It depends who that common customer is. If you're building a tool for industry and your users are electrical engineers, you would design it differently to a consumer mobile app is all I am saying.
    - d0gbread 4y ago
      Most designers happen to serve mostly common customers but there are countless highly used industry specific web applications out there that are navigated primarily by shortcuts, and that software too, has designers. Designers that from my experience are often trying to make B2B, high data density solutions into fluffy UIs despite clear feedback that it's not what users want.
deleted 4y ago
[deleted]
pietroppeter 4y ago
Looks nice and pretty packed with features. Anyone knows of more minimal, lightweight alternatives?
navaneethpk 4y ago
We've built an open-source low-code framework (https://github.com/ToolJet/ToolJet https://github.com/ToolJet/ToolJet) with Tabler as the base for our UI components. choosing Tabler was one of our best decisions, it helped us ship new UI components faster.
rozhok 4y ago
Does it have multi-select input like "select2" (https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox https://select2.org/getting-started/basic-usage#multi-select...)? Demo featuring "advanced select" but it doesn't allow to select multiple items.
thdespou 4y ago
To be the benefits of those envato style html/CSS dashboards is that it saves me time trying to create one from scratch.

541 points by jakearmitage 4y ago

speps 4y ago

Changing page in the table at the bottom of the demo scrolls back all the way to the top on mobile (Chrome Android).

mwiechn 4y ago
Because this is just a template and most of the elements point to # and would require linking in the code. This is a plain html/css site that just requires putting life into it using javascript or more css :)

newusertoday 4y ago

Thanks for this, this is great resource.

TekMol 4y ago

Why pack so many different things into a single project? If I want to build a dashboard with multiple widgets on the screen, my first step would be to look for a layout tool. Which allows me to handle how the screen is divided into multiple areas and offers an interative interface so I can open, move, resize and close those areas. I would not want a bundle that combines the layout tool with charts and forms and whatnot. For example, if I want an area to be used for an interactive chart, I would want to build that with whatever solution I like best. Personally I already use Plotly for many things, so I would go with that.

qabqabaca 4y ago
It's pretty standard for component libraries and/or dashboard templates to cover all the bases for a SaaS dashboard
atonse 4y ago
Any examples of "layout tools" you'd recommend?
puffybeignette 4y ago
Then use plotly bud. Why rag on tabler though? It’s beautiful and provides devs a quick way to get started on a new project without having to think much about UI and lightly customize and have something that looks very professional. And it’s free.
jcpst 4y ago
> Why pack so many different things into a single project? So I can build a dashboard without deciding on a layout tool, then deciding on a solution for charts, etc. I do not consider myself a frontend developer. I'm just not interested in spending time learning about a bunch of UI tools if there's a framework that does it all. This is appealing to me- the less I have to think about the implementation of the presentation layer, the more I can focus on the data processing, persistence, API... the stuff that _I_ care about working on. Not trying to argue, just one answer to your question.
deleted 4y ago
[deleted]
ralgozino 4y ago
The way I see is that it is for the same reason that Qt and GTK include all the widgets and abstractions to create a complete UI. Another framework that I've used in the past for 2 WebApps projects[1][2] -and I was quite happy with the result- is Semantic-UI (and the fomantic fork)[0] [0] https://github.com/Semantic-Org/Semantic-UI https://github.com/Semantic-Org/Semantic-UI https://fomantic-ui.com/ https://fomantic-ui.com/ [1] https://github.com/sighupio/gatekeeper-policy-manager/tree/v0.5.1#screenshots https://github.com/sighupio/gatekeeper-policy-manager/tree/v... [2] https://github.com/ralgozino/vmtory#screenshots https://github.com/ralgozino/vmtory#screenshots
- ralgozino 4y ago
  Sorry, I'm from mobile and pressed send to soon. The point of the examples was to say that these frameworks provide you with the building blocks you need to create a webui without too much effort and with consistent (good) looks
jakearmitage 4y ago
It's a kitchen sink demo, so we can pick the components we want and just use them without spending hours wiring things together or dealing with conflicts. It's why VB was so successful and Qt as well. I never had to worry about stuff like this in desktop. Or reinvent how a combo box should work for every single project. Some people just want the same for the web.
manigandham 4y ago
It's just HTML/CSS so you can already do that. Use what you want from whatever framework you want, but there's a lot of efficiency in one framework providing the vast majority as it's known to work well together and reduces complexity and decision making.

giancarlostoro 4y ago

If you use FastAPI with Tortoise ORM it looks like there's an Admin Interface that uses Tabler: https://github.com/fastapi-admin/fastapi-admin https://github.com/fastapi-admin/fastapi-admin

Waterluvian 4y ago

It’s interesting that it describes the React version as the Single Page Application version. I’ve found that when used competently, React also shines for normal websites both through client or server side rendering.

topicseed 4y ago

It looks neat. Makes me want to build dashboards for a living. Wish there was a Svelte version.

Kraftwurm 4y ago
+1 for the Svelte version

clairity 4y ago

it looks like tabler uses jekyll underneath for docs and demo (which i personally like and am comfortable with). the demo is really nice, ahd while i'm not big on js any more, the js driving tabler looks fairly straightforward and appropriate to my eyes. the underlying html and css, however, give me pause about how easy it would be to integrate into a larger project. <div> soup is how i'd describe the demo html, and its css uses custom properties (css variables) in a way that, on first glance, seems to make it more verbose without adding power, flexibility, or maintainability (or accessibility, but that seems a really big challenge for data-heavy frontends like this). i'd probably try this out if i needed a dashboard on a project, but perhaps would want to test drive it on a small/test project to see where the gotchas are first.

tragictrash 4y ago
This is the kind of feedback that can really help a developer improve their skills
jcpst 4y ago
From what I understand, it should also work ok with more semantic html elements. But it would be nice to see maybe a little of that in the examples.
- krsdcbl 4y ago
  Basically even if it's not built in, adding a reset stylesheet underneath it would make it work with semantic tags just like with divs, so no worries about that. then again, you'd probably not have to care about semantic structure in dashboards anyways, as it's unlikely SEO is a concern. Might be worth considering for accessibility though.
  - jcpst 4y ago
    I liked the look of this enough for certain products ideas that I would just use this as customer facing!
EthicalSimilar 4y ago

rickreynoldssf 4y ago

But I don't have enough room on my laptop for another sticker!

asdvasewe 4y ago

I have been using Apache Superset on top of sqlite for my personal use, and am fairly happy with it. Any advantages/disadvantages of Tabler compared to Superset?

sgt 4y ago
For reporting and BI? How does it perform and how is shareability?
samstave 4y ago
Can you share how youre using it personally?
- asdvasewe 4y ago
  - personal finances - get statement exports to sqlite db and I have dashboards to manage expenses/finances, retirement account data in sqlite and charts for actual and projections - my car - I collect data in sqlite db - amortization schedule/actuals for the loan, fuel/maintenance expenses etc. Dashboards on top of it with metrics such as $ spent, miles, cost of finance, cost of ownership (per mile) etc. - workouts - I used enodomondo but they shut down and I had a data dump, I currently use garmin. So I get all the data to sqlite and drive a dash with overall work out stats over years across platforms.
  - samstave 4y ago
    Thanks! Can you share screens of your car dashboard, this sounds like a marketable simple one-page web-app that people would sign up for an use... But then you'll get millions of users and you'll have to learn postgress and a range of other meta-metrics to track your uptime and availability 9s to your constituent users....
    - asdvasewe 4y ago
      Right now I just have a raspi hosting superset and sqlite for me and I use it locally, its not out in the open. However, based on my experience, the metrics and dashboard for the car are not very hard to do, the biggest factor imo is the discipline of data collection, get receipts and insert data to the db for each refuel, maintenance, parts, registrations, insurance etc. If you miss collecting data, the data/insights aren't as useful anymore. Maybe scanning receipts and ocr is the next step, that's on my roadmap, when I find time that is :)

la_fayette 4y ago

From what I understand, tabler is just a UI template. So if you want build a dashboard application, you have to build all things, like user management, visualizations etc yourself? I am a happy user of grafana. All things are there. Tabler looks good and also the responsive UI is really cool, but building all the backend for a dashboard application will be a challenging endeavour. Using grafana or metabase seems fine...

cweagans 4y ago
in the context of a ui kit, "dashboard" is not the same thing as what grafana gives you. it's more of a dashboard as in the ui that you get after you log in to some saas app.

EugeneOZ 4y ago

Nowadays design language of your framework should look at least not worse than Material Design 3 or Twitter Bootstrap (just because they are there and you can learn from them). This project needs some more effort to achieve it, right now it looks like it was designed 5 years ago.

Nextgrid 4y ago
What problems do you see? Personally I like it and "not looking like Material Design" is something I'd consider a feature.
- EugeneOZ 4y ago
  I expressed what problems I see - their design looks outdated and doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive). You misunderstood me: I wasn't saying that their design should look like Material Design 3. I said it should look better and take into account all the lessons we learned from Twitter Bootstrap, Material Design, and other sources. Otherwise, there are no reasons to use it.
  - dmitriid 4y ago
    > their design looks outdated Define "outdated". It looks similar to literally any other modern UI framework with the exception that it focuses on dashboard/backoffice functionality (almost none of the UI frameworks do) > doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive). Yes, that is maybe a problem. Depending on what exactly you need. I've yet to see a single UI framework that offers both a consistent set of good dashboard/backoffice elements and a good mobile experience (because it's actually hard to do). And Material is emphatically not a good example.
  - barnabee 4y ago
    Material Design looks awful to me. I quite like this. The elements in the demo are also definitely not too small for my taste. On my iPhone 13 Pro I actually think the demo looks best at 85% and it is still perfectly usable at that zoom level on a touchscreen. Everything is too damn big on mobile sites, which is ludicrous considering the tiny screens.

willcodeforfoo 4y ago

I love Tabler and have used it for a few projects with great success. The title of the OP is not really accurate though. It's not so much a framework but a bunch of customization on top of Bootstrap and some pre-built templates for stuff _like_ dashboards, galleries, forms, etc. The site is more like a kitchen sink demo and documentation site for stuff you can pick apart and use in your own application.

mbreese 4y ago
Thank you for adding this. I love the look of this project and was quite excited. But I couldn't figure out how one would actually get started creating a site with it. Now I get it...
EthicalSimilar 4y ago
Completely agree with your sentiment. It has been incredibly refreshing to use Tabler on my projects in comparison to the norm ("admin dashboard" templates) that tend to fight you when you don't follow their pre-defined layout, or when you want to extend the UI kit with your own components without having to re-implement the styling used by the kits.
ahmed_ds 4y ago
How do you approach building on top of a dashboard template? > Any change in /src directory will build the application and refresh the page. Do you start from the demo page and start ripping off components that you don't need? Or do you pick specific parts from the template and build it from scratch from bottom up? Even though templates seem to be an easy way to build stuff, I never understood the approach building from templates.
- EthicalSimilar 4y ago
  In this instance, think of it less as a template and more of a UI Kit. The demo is just there to showcase what's available in the kit. Dashboards are usually quite unique depending on the data they display and purpose of them, so just ripping the demo isn't necessarily going to be the best approach to go with. In my case I'd start with choosing a layout and throwing together a rough sort of navigation menu, and then building each page by scratch (or based off previous pages). It's as simple as browsing the demo to find which components you need and then just copy / pasting them, either directly from the demo page or from the documentation. The only times I've ripped entire pages have been for auth pages, error pages, etc - i.e. pages that are usually quite common to all applications. I find that it's better to take a standardised approach for these pages as it's more intuitive for the users rather than reinventing the wheel.

pelagicAustral 4y ago

I love Tabler. I've used it for a few Rails projects and since Rails 7 it's even easier to integrate thanks to Import Maps. I can get a project off the ground even faster with this UI kit. I'm already used to the Bootstrap classes and tags so this is just the final component for maximum productivity. I get some people don't dig the design but I think it look serious, and in general that's what dashboard are for, serious business. They need to be readable and simple to understand and use. Tabler gives that vibe. Edit: As an afterthought, I would really appreciate if anyone knows any similar projects. It'd nice to compare and have more options. So far I havent found anything so compelling in this space.

13324 4y ago
You could have a look at AdminLTE (https://adminlte.io/ https://adminlte.io/).
metadat 4y ago
Does is also play nice with Python, Go, or Rust? Never heard of import maps until now, not immediately clear what they obviate. https://blog.appsignal.com/2022/03/02/import-maps-under-the-hood-in-rails-7.html https://blog.appsignal.com/2022/03/02/import-maps-under-the-...
- pelagicAustral 4y ago
  Yeah, the import maps comment mainly stems from a personal hatred against Webpacker. Wiring everything together was quite more tedious before Rails 7. I would think it does, at least with Django I know you can also automate the project creation with a script and get to coding straight away, not sure about frameworks for Go or Rust but I'd figure it be more or less the same.
thrownaway561 4y ago
FYI there is a gem for tabler and rails https://github.com/lightyrs/tabler-rubygem https://github.com/lightyrs/tabler-rubygem there is also a pull request for integration with Rails 6 https://github.com/tabler/tabler/issues/822 https://github.com/tabler/tabler/issues/822

ocdtrekkie 4y ago

Never used Tabler itself, but I am an absolute loyalist for using their icons, which are all MIT licensed and available in SVG. https://github.com/tabler/tabler-icons https://github.com/tabler/tabler-icons

clairity 4y ago
nice, i may have to look into using these for my personal css framework project. i'm still not sold on svg as an unalloyed good over font icons (as they're really verbose and cluttery in markup), but they do have some good points as well (e.g., multi-color and css-able).
- ocdtrekkie 4y ago
  To me, the key point about having the SVGs is they're basically the "source code". Whether you want to use SVGs directly or not, you can, and you have all of the tools to make high-quality custom icons using the same shapes.

tofuahdude 4y ago

Has anyone used this in a Phoenix LiveView project by chance?

dmitriid 4y ago
I have. Works well (I would inspect examples on the demo site and copy-paste them wholesale). I switched to Tailwind templates though because they suited me better. And honestly I couldn't (be bothered to) figure out how to only use the CSS required, not the whole bundle, with Tabler.
- tofuahdude 4y ago
  Do you just bundle Tabler's JS into Phoenix asset pipeline and let it do its thing naively in the browser? I guess most the JS is just visual changes, but i wonder if that brings live view out of sync with the dom.
  - dmitriid 4y ago
    Ah. I haven't used anything that required JS. Just the purely visual components like tables, stats etc.
- 2mol 4y ago
  Which templates do you use?
  - dmitriid 4y ago
    I've shelled out $$ for https://tailwindui.com/ https://tailwindui.com/ Currently using their components, but will (re-)use Primer for a private project https://tailwindui.com/templates/primer https://tailwindui.com/templates/primer
    - thejosh 4y ago
      Yeah tailwind ui components are great, especially for liveview. Surface (liveview templating) makes it super easy as well.

Lorin 4y ago

Based on demo site: doesn't seem to have a 'tag' input UI, only single input item switching. Additionally, some accessibility concerns re: contrast/highlighting.

Willish42 4y ago

Wow, this is really great! I love the design and especially the sophistication of that demo page. Really powerful and professional looking stuff.

deleted 4y ago
[deleted]

babyshake 4y ago

Are there any good reasons to use this instead of Tailwind? Is it mainly just the look of the components?

jcpst 4y ago
Way less work? Tailwind is on a lower level of abstraction than this.
- mosselman 4y ago
  Haha to me Tailwind feels like it is on an even lower level of abstraction than vanilla CSS. So I'd expect something like Tabler to be a good way to quickly start somewhere. The better question would be: "What is the difference between Tabler and using Bootstrap or Bulma or some other framework?"

bilsbie 4y ago

Anyone want to explain this like I’m a cgi-bin developer from 2004?

tofuahdude 4y ago
Websites are made with html and css (and frequently 15mb of javascript) This is a package of pre-formatted and pretty html and css, with a small amount of javascript, built on top of another package of pre-formatted and pretty html and css, with a small amount of javascript.

corbin 4y ago

I've used this for a couple of projects now and like it. But am not a fan of the current trend of spaced out layouts. Visually they look good but in practice for information dense pages it is difficult to fit everything in. Maybe it is bad design on my part but I'd prefer a web layout that looks more like a desktop application (think Photoshop or Visual Studio)

taspeotis 4y ago
Maybe https://blueprintjs.com/ https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)

mulmen 4y ago

I hate this modern design trend of wasting as much of my screen real estate as possible. It's ugly and it wastes my time, which is rude. Every one of these tables is literally 300% taller than it needs to be. Get rid of all the pointless padding and spaces. You can pack 3x the information on screen. This looks "modern" but it doesn't look good and it certainly isn't useful. Every time I bring this up in UX review designers look at me like I'm from the moon. In the "Invoices" table in the preview seven hundred vertical pixels are used to display eight lines of data. That's worse than a VT100 by a factor of three. https://preview.tabler.io/ https://preview.tabler.io/

pjgalbraith 4y ago
There are designers that appreciate the distinction between the way you design a desktop application vs a consumer website / mobile app. A lot of the design literature and discussion seems to be focused on the latter these days. A lot of things that desktop applications did are missing in most web apps; high information density, resizable panels, panel layouts (side by side etc...), keyboard shortcuts, embedded CLI's, and so on. It makes the user experience a lot worse for power users.
- sodality2 4y ago
  Designers optimize for the common customer, which does _not_ want keyboard shortcuts or embedded CLI's etc.
  - pjgalbraith 4y ago
    It depends who that common customer is. If you're building a tool for industry and your users are electrical engineers, you would design it differently to a consumer mobile app is all I am saying.
  - d0gbread 4y ago
    Most designers happen to serve mostly common customers but there are countless highly used industry specific web applications out there that are navigated primarily by shortcuts, and that software too, has designers. Designers that from my experience are often trying to make B2B, high data density solutions into fluffy UIs despite clear feedback that it's not what users want.

deleted 4y ago

[deleted]

pietroppeter 4y ago

Looks nice and pretty packed with features. Anyone knows of more minimal, lightweight alternatives?

navaneethpk 4y ago

We've built an open-source low-code framework (https://github.com/ToolJet/ToolJet https://github.com/ToolJet/ToolJet) with Tabler as the base for our UI components. choosing Tabler was one of our best decisions, it helped us ship new UI components faster.

rozhok 4y ago

Does it have multi-select input like "select2" (https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox https://select2.org/getting-started/basic-usage#multi-select...)? Demo featuring "advanced select" but it doesn't allow to select multiple items.

thdespou 4y ago

To be the benefits of those envato style html/CSS dashboards is that it saves me time trying to create one from scratch.