Create Awesome Dashboards in React Using Tremor
Building a complex user interface in React, like a dashboard, can be daunting if you’re doing it from scratch. Thankfully, you don’t have to do so.
One of the best component libraries you can use is Tremor which allows you to create modern, responsive dashboards in React with little effort. Find out how to use Tremor to create dashboards in React.
What Is Tremor?
Tremor is a modern, open-source, low-level UI component library for building dashboards in React. Tremor builds on top of Tailwind CSS, React, and Recharts (another component-based charting library for React). On top of that, it uses icons from Heroicons.
It boasts over 20 components with all the essentials for building a fantastic analytical interface like charts, cards, and input elements. The library includes small, modular components like badges, buttons, dropdowns, and tabs, that you can combine to create full-fledged dashboards.
What makes Tremor stand out is that it’s highly opinionated, so as long as you’re okay with the library’s decisions, you can fire up a professional-looking dashboard in a breeze.
Tremor supports customization, of course, and makes it easy to do so via React’s props system.
How to Get Started With Tremor
Start bycreating a new React appusing thecreate-react-apppackage (or Vite if that’s what you prefer).
You’ll need to already have Node.js and npm installed on your system. You can confirm this by runningnode –versionand thennpm –versionon a command line. If either command is missing, you can install them using a simple process; see this guide toinstalling Node.js and npm on Windows, for example.
Setting Up Your React Project With Tremor
Although Tremor uses Tailwind CSS, you don’t need to install it in your React app to use the library. This is because Tremor already has Tailwind set up internally. However, if you want to, check out our tutorial oninstalling Tailwind CSS in React.
Next, install Heroicons in your project using the following command:
Now, let’s remove unnecessary code in oursrc/App.jsfile. Here’s our starter code inApp.js:
Next, create a dedicatedcomponentssubfolder in yoursrcfolder. In thatcomponentsfolder, create a newDashboard.jsfile and add the following code:
Import the Dashboard component inApp.jsby adding the following statement after other imports:
Finally, display the component in your React app by addingbelow theh1element.
Creating a Dashboard With Tremor
To create a complete dashboard using Tremor, with a minimum of fuss, select one of the available blocks. Blocks are prebuilt layouts made up of different small modular components.
A good starting point isTremor’s blockssection which showcases different types of prebuilt block components that you can use. Layout shells, for example, let you piece together different components to create a dashboard.
First, add the following code to yourDashboard.jsfile:
The shell block contains different components that you import at the top of the file. If you preview this in your browser, you’ll only see two empty blocks.
it’s possible to populate your blocks with Tremor’s prebuilt components, like a chart, card, or table. You can pull data from an API (REST or GraphQL) or store it in an array of objects right inside your component.
To add a component to your shell block, replace theline with the following:
After that, add the following array before yourreturnstatement (this is the data that the dashboard’s main section will display):
Next, add the following code to your file aftervalueFormatter:
For thecategoriesarray of objects, you have to map through each object to display the data in separateCardcomponents. First, delete the Card component in the KPI section and then replace it with this code:
And that’s it. You’ve created your first dashboard with Tremor. View your dashboard by runningnpm start. It should be similar to the screenshot above.
Customizing Tremor Components
Tremor allows customization using props. You’ll need to review the documentation of the component you want to customize and check all the properties included with their default values.
For instance, if you have a , you can hide the x-axis by passing the propshowXAxis={false}or change the height usingheight={h-40}. For props declaring values found in Tailwind CSS, like sizing, spacing, colors, and the rest, you must use Tailwind utility classes.
Build Complex React Dashboards With Ease
Thanks to component libraries like Tremor, you don’t need to build every single part of your UI from scratch. Using a library like Tremor can save you both the time and the headache of creating complex responsive UIs.
Social share buttons can help you to drive more traffic to your app.
Sometimes the smallest cleaning habit makes the biggest mess.
These plugins will make you wonder why you used Photoshop in the first place.
Flagship price, mid-range phone.
Some subscriptions are worth the recurring cost, but not these ones.
These are the best free movies I found on Tubi, but there are heaps more for you to search through.
