Tabler: Free and open source dashboard HTML/CSS framework

by jakearmitage • 4 years ago

541 87 4 years ago

speps• 4 years 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• 4 years 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• 4 years ago

Thanks for this, this is great resource.

TekMol• 4 years 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• 4 years ago

It's pretty standard for component libraries and/or dashboard templates to cover all the bases for a SaaS dashboard

atonse• 4 years ago

Any examples of "layout tools" you'd recommend?

puffybeignette• 4 years 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.

jcpst4• 4 years 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.

ralgozino2• 4 years 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://fomantic-ui.com/

[1] https://github.com/sighupio/gatekeeper-policy-manager/tree/v... [2] https://github.com/ralgozino/vmtory#screenshots

ralgozino2• 4 years 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• 4 years 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.

manigandham2• 4 years 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• 4 years 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

Waterluvian• 4 years 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• 4 years ago

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

Kraftwurm• 4 years ago

+1 for the Svelte version

clairity3• 4 years 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• 4 years ago

This is the kind of feedback that can really help a developer improve their skills

jcpst4• 4 years 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• 4 years 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.

EthicalSimilar3• 4 years ago

The CSS variables actually provide that exact functionality, in a sense. They allow you to adjust the colour scheme, font sizes, layout (margins, padding) without having to grep all of the stylesheets.

I stumbled across Tabler a few months ago and have integrated it into one of my projects. I love how easy it has been to throw a site together for a client with minimal time spent on writing stylesheets, or modifying your more generic "admin dashboard" templates that used to be the norm. I do, however, completely agree with your comment regarding <div> soup.

clairity3• 4 years ago

i appreciate you contributing your experience on this. to be more specific, it looks to me like a lot of the css variables are too granular, likely because they're being generated via scss functions, and so must conform to a set of algorithmic conventions. but a lot of the time, you don't want to tweak just the default border color of the card component separate from its border width separate from the border color of a generic container (or whatever). i haven't delved deep enough to know precisely how this all plays out, but that's what it looks like to me on first perusal.

bootstrap does this as well, and since tabler is built on bootstrap, it seems they're extending that precedent (there's a lot of "!important" going on to, which is not a good sign). i'll admit i'm not much of a bootstrap fan either.

i'm slowly developing my own personal css framework where i'm trying to have no tooling at all, including no scss, and very, very minimal js (and certainly no framework or packaging/transpiling of js at all) by default. it leans heavily on css variables and all the other current css goodies (good riddens IE!). that way, it can fit into any use case without having to worry about tooling conflicts. bulma kinda takes this approach (particularly, no js), but it's weirdly not as extensive as i'd expected it to be.

rickreynoldssf• 4 years ago

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

asdvasewe3• 4 years 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• 4 years ago

For reporting and BI? How does it perform and how is shareability?

samstave2• 4 years ago

Can you share how youre using it personally?

asdvasewe3• 4 years 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.

joemi• 4 years ago

While they can both be used for dashboard, they seem to be quite different. From what I can tell, Superset is a platform while Tabler is a html/css framework. If I'm understanding it correctly... Superset integrates with a database, but as a framework Tabler needs some sort of backend to drive any database interaction. Superset has it's own UI that you interact with while building your dashboard, but Tabler is just a set of elements that you'd need to use to build a dashboard using whatever web development methods you prefer.

So they're for different purposes even though they both result in dashboards.

manigandham2• 4 years ago

Superset is software that connects to data sources and provides a GUI for running queries and analyzing results. Similar to Redash, Metabase, QuickSight, PowerBI, Tableau, Mode, Sisense, etc.

Tabler is just a (semi)framework for building the UI layer of that software. It doesn't provide any actual execution of logic.

la_fayette• 4 years 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• 4 years 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.

EugeneOZ3• 4 years 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• 4 years ago

What problems do you see? Personally I like it and "not looking like Material Design" is something I'd consider a feature.

EugeneOZ3• 4 years 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.

maxloh• 4 years ago

Bootstrap looks ugly to me, compared to other design systems like Microsoft's Fluent Design System or IBM's Carbon Design System.

EugeneOZ3• 4 years ago

Yeah, nowadays Bootstrap looks outdated a bit, agree.

willcodeforfoo• 4 years 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• 4 years 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...

EthicalSimilar3• 4 years 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• 4 years 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.

EthicalSimilar3• 4 years 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.

pelagicAustral2• 4 years 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.

metadat• 4 years 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-...

pelagicAustral2• 4 years 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.

13324• 4 years ago

You could have a look at AdminLTE (https://adminlte.io/).

thrownaway561• 4 years ago

FYI there is a gem for tabler and rails

https://github.com/lightyrs/tabler-rubygem

there is also a pull request for integration with Rails 6

https://github.com/tabler/tabler/issues/822

ocdtrekkie2• 4 years 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

clairity3• 4 years 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).

ocdtrekkie2• 4 years 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.

tofuahdude3• 4 years ago

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

dmitriid4• 4 years 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.

2mol• 4 years ago

Which templates do you use?

tofuahdude3• 4 years 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.

Lorin• 4 years 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• 4 years ago

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

babyshake• 4 years ago

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

jcpst4• 4 years ago

Way less work? Tailwind is on a lower level of abstraction than this.

mosselman• 4 years 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• 4 years ago

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

tofuahdude3• 4 years 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• 4 years 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• 4 years ago

Maybe 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.)

mulmen4• 4 years 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/

pjgalbraith2• 4 years 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• 4 years ago

Designers optimize for the common customer, which does _not_ want keyboard shortcuts or embedded CLI's etc.

root_axis• 4 years ago

Every one of these tables is literally 300% taller than it needs to be

Looks fine to me. The page is already pretty information dense, making it even more dense isn't necessarily better, but it's all pretty subjective.

mulmen4• 4 years ago

I’m talking about the whitespace within a row. There’s no reason to make a row in the table 3x taller than the text on the row. If you think 8 rows is all your users need that’s fine, but why waste all that space?

johnfn• 4 years ago

It's a dashboard. The point of a dashboard is to present the most important information in an aesthetically pleasing way, not to cram as much informational density per pixel as possible. This is why your UX review designers look at you like you're from the moon - you're not understanding the user need.

mulmen4• 4 years ago

My UX designers are building backend operational tooling that I use every day. Batch processing workloads that need babysitting and manual intervention. I often have several windows of these open to maintain multiple pipelines in parallel. Information density is critical in such an application.

pietroppeter• 4 years ago

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

navaneethpk• 4 years ago

We've built an open-source low-code framework (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• 4 years ago

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

thdespou• 4 years ago

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

Tabler: Free and open source dashboard HTML/CSS framework

Related Stories