Tremor – The React library to build dashboards fast

https://www.tremor.so/

by spansoa • 3 years ago

167 81 3 years ago

skymer• 3 years ago

There are plenty of React dashboard libraries. They seem to be useful in building a top-level overview of a database with many tables. Can someone list a few real-world examples (web sites) where the dashboard is more than 10% of the work in building the site? The cases I know, e.g. wise.com or quickbooks.intuit.com would be much less than 10%.

brycelarkin• 3 years ago

Backend / API companies like Stripe and AWS

bdcravens2• 3 years ago

Pretty much any client area of a B2B site. Obviously the actual backend is a significant part of that time, but on many apps, most pages will use components along these lines.

jszymborski• 3 years ago

Anyone know what the just-CSS version of this would be? Like Bootstrap for Dashboards?

exod9836• 3 years ago

Regarding the charts, you would have to use low-level chart libraries, such as VisX or D3

bdcravens2• 3 years ago

There are server-rendered charts, but those have more or less fallen out of vogue since there's no interactivity.

exod9836• 3 years ago

Highcharts seems also really customizable

simonbarker872• 3 years ago

chartscss.org could cover off basic stuff

dbbk• 3 years ago

This library just wraps Recharts

runarberg• 3 years ago

Write the SVG by hand use DOM manipulation to alter the d attribute of an SVG <path>, use a low lever library like d3-shape to compute the interpolations.

samspenc• 3 years ago

Interesting it's open-source but they don't seem to highlight it on their home page, I had to search for their Github page to find it https://github.com/tremorlabs/tremor

Then when I came back to the home page and searched for "license", I confirmed it says "Apache-2.0 license" in light-grey, small font in the middle of the page.

exod9836• 3 years ago

Hi, Chris here from Tremor. Many thanks for the feedback! I wasn't aware that it is not directly understood as an open-source library by our website hero title

simonbarker872• 3 years ago

I totally missed it as well, got to the bottom of the page, saw something about pre-release and assumed it was paid for. This comment above is what has made me go back and bookmark.

latchkey22• 3 years ago

I started a react component library project that has been going for 4 years now and gets about 40k downloads a month.

If it wasn't for my test suite, things would have been a giant mess long ago and I probably would have abandoned it. I can't think of doing a react project without a test suite because over time, any dependencies you have (including on react) will end up breaking things in ways that you don't know. Without those tests, you can't be sure of upgrades... which you're forced to do because your users will want to do things like upgrade react.

So... any project like this... in order for me to ever add it to my own project or depend on it in any way, really needs a test suite.

The test suite for this project is pretty much non-existent, which is a huge bummer should should be a huge red flag for anyone who thinks about using it. You're just going to end up with broken code.

code_witch_sam• 3 years ago

i only skimmed the home page, but it seems far too opinionated for general use. if you're starting fresh and plan to use tremor as your all-encompassing ui kit, it seems fine. but at that point, why not grafana, retool, or some other no-to-low-code dashboard solution?

latchkey22• 3 years ago

It is fine for a quick one off project, but if you're going to depend on anything over the long term, you have to be able to upgrade it. Especially in JS land where things change almost weekly. 99% of my releases have been simply about dealing with changes of dependencies. I wouldn't be confident to do a release if I didn't have a test suite.

You're right on the point of using another low code solution though... it still opens you up to dependency issues. You might also want this as a product with its own skinned UX/UI that you have full control over. Third party 'commercial' products won't always give that to you.

appplication2• 3 years ago

Not a react dev, but having a comprehensive test suite is the only reason I feel comfortable pushing code changes and upgrading dependencies. It is difficult at first to build the habit and discipline to always write comprehensive tests for new code, but it is very worth it.

latchkey22• 3 years ago

In JS land it is especially important and honestly one of the least done things, which is sad and a source of why things are always breaking randomly.

ketzo• 3 years ago

What does your test suite look like? (What's the library is maybe a better question)

latchkey22• 3 years ago

Good question.

`@testing-library/react` and jest to run it. snapshots and a bunch of action code too.

There are more modern frameworks now too that can be used for integration tests, but I haven't bothered yet as the snapshots have almost always caught the issue.

It boggles my mind that react.dev doesn't start off teaching, with writing tests.

Capricorn24814• 3 years ago

I have yet to see a good frontend test, but I'm waiting to be enlightened. For the most part, it just seems to be things like "if they click this button, make sure this div is gone." That smells like a test double to me.

latchkey22• 3 years ago

I have yet to see a good frontend test

You haven't written one yourself? Is your theory that since you can't write one, they aren't possible?

All my tests are good enough to ensure that if I upgrade a library or change underlying functionality, something breaks if the output is not expected. That is my primary concern and that is what I test for.

LocalPCGuy2• 3 years ago

We have hundreds of tests for our client side projects (web app, mobile app), and they definitely do more than what you describe.

Some are simple (although very few are as simple as your example) and some are complex, depending on the portion of the app being tested. Some are basically integration tests for components/widgets, where it runs it in isolation to test the inputs and outputs. Others are more like traditional unit tests where it's purely testing business logic, API and model interactions (mocked), form validation logic, etc.

Unless you're talking about very simple client apps, there's always stuff that can be tested that will provide significant business value by preventing bugs and broken code from getting to end users

nazka• 3 years ago

You should take a look at the end to end testing tool named Cypress. As an end to end test it goes beyond click this check that. As an end to end test it will make sure that your app with its features works seamlessly for the user and that your React components work well together. Cypress is amazingly built and it is super fast to write tests with it. It’s easier to debug and seeing the robot doing the tests is pretty cool. For me it’s a must have.

You can check:

https://youtu.be/BQqzfHQkREo https://youtu.be/OVNjsIto9xM&t=28m06s https://youtu.be/VvLocgtCQnY

renegade-otter• 3 years ago

My personal projects generally have a better test suite than what I do for work. First of all, I do it at my own pace, but more importantly - it makes the whole thing possible, as you said.

The nature of a personal project is such that I may not come back to it for months, sometimes even years. The first thing I always do is run the test suite. It's my lodestar. It helps me understand what state the project is in so I can confidently pick up where I had left it.

It is also my requirements documentation - as code.

latchkey22• 3 years ago

People are often given timelines at work that don't include testing. As a believer in agile, I generally push back hard to include testing.

I'd rather dole out incomplete MVP's with tests and fewer features than to skip tests entirely just to hit crazy timelines with a buggy product. Experience says this almost always has positive long term results.

moneywoes• 3 years ago

What is your test suit like?

ramesh31• 3 years ago

I've gotten so jaded on these "batteries included! everything you'll ever need!" component libraries over the years. Inevitably you'll run into a component that is half-baked or incompatible with your architecture, which forces you to install a 3rd party alternative.

Then it happens again. And again...

Eventually you're left pulling in this huge library with 2MB of CSS just for the four components you're still using from it. Then a new dev joins the team and gets to enjoy the confusion of "should i use $library component here? Or do we have another wrapper for it? or is there something else entirely being used for it?".

Just avoid the hassle and stick with a curated list of well fleshed out individual components that are tested and have thousands of stars each. Create a barebones wrapper over it to match your design system, and call it a day.

smrq• 3 years ago

I've gotten jaded with that approach too. The same thing happens, just on an individual component scale. (The number of times I've gotten written into a corner with $dropdown_component is too damn high.) My pendulum has swung to do it all yourself with ample links in the source to other projects on GitHub for inspiration.

TheCapeGreek• 3 years ago

I agree with you. But I think this is a symptom of a different problem: Building admin panels with UI tools instead of config-driven tools.

While component libs like this can be used for consumer-facing UI, when we talk about "dashboards" it's also often backoffice admin panels.

You shouldn't be reaching for hand-writing UI design & logic in that scenario. You should be looking for an admin panel interface tool. Laravel has these in spades: Nova, Backpack, and Filament are the big three. You write some code and some logic tied to it, and the tool creates the UI for you. This lets you get back to writing code for the actual customers instead of for business processes.

These can be used for consumer facing panels too, but with less control over the design, they're not really intended for it.

But the JS ecosystem insists on being fragmented, so everything is rewritten manually.

"Batteries included" needs a lot more than just batteries (the UI components).

Etheryte• 3 years ago

Very tongue in cheek, but the uptime widget is clearly ready for industry-wide use, the numeric value says 99% uptime, but the colored illustration next to it clearly shows worse performance.

pizzafeelsright• 3 years ago

On a short enough timeline were all 99.999% uptime.

sdesol• 3 years ago

If you are looking for a dashboard system that is written in vanilla JS, I will be open sourcing my DevBoard in the next month or two. You can see it in action at https://devboard.gitsense.com/microsoft/vscode and learn more about the widget system at https://devboard.gitsense.com/microsoft/vscode?board=gitsens... Note the repo that is mentioned in the intro page hasn't been pushed to GitHub yet, but will be soon.

The server is a very simple node/express app and the front end is written in vanilla javascript. I also use GitHub's primer css (https://github.com/primer/css) and a heavily stripped down version of tabler's css (https://github.com/tabler/tabler)

Note, DevBoard is more geared towards hackers, so Tremor's is probably a much better fit if you are looking for an out of the box solution.

wdb• 3 years ago

I am curious how Vercel or cal.com uses this library for their products

leerob• 3 years ago

We don’t use Tremor for our product dashboard, but do use it for some starter templates we create to build on.

exod9836• 3 years ago

cal.com uses it for its insight section -> cal.com/insights

exod9836• 3 years ago

Another example built by vercel: edge-data-latency.vercel.app

rp36• 3 years ago

As per refine.dev blog, these are some alternatives to Tremor:

* Ant design pro (https://github.com/ant-design/ant-design-pro/) * Material Dashboard React (https://github.com/creativetimofficial/material-dashboard-re...) * Volt React (https://github.com/themesberg/volt-react-dashboard)

Anyone have more suggestions?

rohan_• 3 years ago

Things like this really need corresponding figma components as well.

exod9836• 3 years ago

tremor.so/figma

thih9• 3 years ago

Looks great and I like the variety!

Feature request: I wish the table supported basic sorting and maybe even filtering out of the box, I find these useful in the dashboard context. Perhaps I’m not seeing it, or maybe there’s a way to add this easily?

sakerbos• 3 years ago

I've been using this while prototyping a few projects and absolutely loving it, the charts are beautiful! Just missing a few essential components like a dialog, toast/snackbar and notification banner but covers at least 80% of the components I need :)

SillyUsername• 3 years ago

BE Dev here who knows a little FE. Can this be used easily with something like htmx?

Tremor – The React library to build dashboards fast

Related Stories