Thankfully, you don’t have to do so.
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.
On top of that, it uses icons from Heroicons.
Tremor supports customization, of course, and makes it easy to do so via React’s props system.
You’ll need to already have Node.js and npm installed on your system.
you might confirm this by runningnode –versionand thennpm –versionon a command line.
This is because Tremor already has Tailwind set up internally.
However, if you want to, check out our tutorial oninstalling Tailwind CSS in React.
Here’s our starter code inApp.js:
Next, create a dedicatedcomponentssubfolder in yoursrcfolder.
Blocks are prebuilt layouts made up of different small modular components.
Layout shells, for example, let you piece together different components to create a dashboard.
If you preview this in your web client, you’ll only see two empty blocks.
you could populate your blocks with Tremor’s prebuilt components, like a chart, card, or table.
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.
Using a library like Tremor can save you both the time and the headache of creating complex responsive UIs.
