10 ms·

Tremor – The React library to build dashboards fast

167 points by spansoa 3y ago

wdb 3y ago
I am curious how Vercel or cal.com uses this library for their products
- exod983 3y ago
  Another example built by vercel: edge-data-latency.vercel.app
- leerob 3y ago
  We don’t use Tremor for our product dashboard, but do use it for some starter templates we create to build on.
- exod983 3y ago
  cal.com uses it for its insight section -> cal.com/insights
skymer 3y 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 3y ago
  Backend / API companies like Stripe and AWS
- bdcravens 3y 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 3y ago
Anyone know what the just-CSS version of this would be? Like Bootstrap for Dashboards?
- exod983 3y ago
  Regarding the charts, you would have to use low-level chart libraries, such as VisX or D3
  - bdcravens 3y ago
    There are server-rendered charts, but those have more or less fallen out of vogue since there's no interactivity.
  - exod983 3y ago
    Highcharts seems also really customizable
  - simonbarker87 3y ago
    chartscss.org could cover off basic stuff
  - dbbk 3y ago
    This library just wraps Recharts
  - runarberg 3y 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 3y 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 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.
- exod983 3y 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
  - simonbarker87 3y 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.
latchkey 3y 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 3y 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?
  - latchkey 3y 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.
- appplication 3y 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.
ramesh31 3y 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 3y 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.
  - deleted 3y ago
    [deleted]
- TheCapeGreek 3y 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 3y 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 3y ago
  On a short enough timeline were all 99.999% uptime.
sdesol 3y 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 https://devboard.gitsense.com/microsoft/vscode and learn more about the widget system at https://devboard.gitsense.com/microsoft/vscode?board=gitsense_examples.intro_to_widgets 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 https://github.com/primer/css) and a heavily stripped down version of tabler's css (https://github.com/tabler/tabler 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.
rp36 3y ago
As per refine.dev blog, these are some alternatives to Tremor: * Ant design pro (https://github.com/ant-design/ant-design-pro/ https://github.com/ant-design/ant-design-pro/) * Material Dashboard React (https://github.com/creativetimofficial/material-dashboard-react https://github.com/creativetimofficial/material-dashboard-re...) * Volt React (https://github.com/themesberg/volt-react-dashboard https://github.com/themesberg/volt-react-dashboard) Anyone have more suggestions?
rohan_ 3y ago
Things like this really need corresponding figma components as well.
- exod983 3y ago
  tremor.so/figma
ernestomartija 3y ago
[flagged]
thih9 3y 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 3y 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 3y ago
BE Dev here who knows a little FE. Can this be used easily with something like htmx?

167 points by spansoa 3y ago

wdb 3y ago

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

exod983 3y ago
Another example built by vercel: edge-data-latency.vercel.app
leerob 3y ago
We don’t use Tremor for our product dashboard, but do use it for some starter templates we create to build on.
exod983 3y ago
cal.com uses it for its insight section -> cal.com/insights

skymer 3y 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 3y ago
Backend / API companies like Stripe and AWS
bdcravens 3y 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 3y ago

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

exod983 3y ago
Regarding the charts, you would have to use low-level chart libraries, such as VisX or D3
- bdcravens 3y ago
  There are server-rendered charts, but those have more or less fallen out of vogue since there's no interactivity.
- exod983 3y ago
  Highcharts seems also really customizable
- simonbarker87 3y ago
  chartscss.org could cover off basic stuff
- dbbk 3y ago
  This library just wraps Recharts
- runarberg 3y 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 3y 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 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.

exod983 3y 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
- simonbarker87 3y 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.

latchkey 3y 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 3y 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?
- latchkey 3y 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.
appplication 3y 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.

ramesh31 3y 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 3y 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.
- deleted 3y ago
  [deleted]
TheCapeGreek 3y 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 3y 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 3y ago
On a short enough timeline were all 99.999% uptime.

sdesol 3y 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 https://devboard.gitsense.com/microsoft/vscode and learn more about the widget system at https://devboard.gitsense.com/microsoft/vscode?board=gitsense_examples.intro_to_widgets 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 https://github.com/primer/css) and a heavily stripped down version of tabler's css (https://github.com/tabler/tabler 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.

rp36 3y ago

As per refine.dev blog, these are some alternatives to Tremor: * Ant design pro (https://github.com/ant-design/ant-design-pro/ https://github.com/ant-design/ant-design-pro/) * Material Dashboard React (https://github.com/creativetimofficial/material-dashboard-react https://github.com/creativetimofficial/material-dashboard-re...) * Volt React (https://github.com/themesberg/volt-react-dashboard https://github.com/themesberg/volt-react-dashboard) Anyone have more suggestions?

rohan_ 3y ago

Things like this really need corresponding figma components as well.

exod983 3y ago
tremor.so/figma

ernestomartija 3y ago

[flagged]

thih9 3y 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 3y 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 3y ago

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