1. Getting Started
  2. Installation

Getting Started

Installation

Here we create a new project with a React framework, install Tremor and create a KPI component.

Note: The library is currently in beta. This means your project may break when a new version is released.

1. Select Framework

For new projects, we recommend using Next.js, as it also provides a simple deployment workflow through the Vercel platform. To make use of the library we also need to install Tailwind CSS.

Using Next.js

In our terminal, we create a new Next.js project:

npx create-next-app my-project --typescript 
cd my-project

Install Tremor from your command line via npm.

npm install @tremor/react

Install Tailwind CSS and its peer dependencies

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Using src directory? Add the following, including the path to the Tremor module.

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
// If using the src directory, add:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module

],
theme: {
extend: {},
},
plugins: [],
}

Not using src directory? Add the paths to all of your template files in your tailwind.config.js file, including the path to the Tremor module.

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module

],
theme: {
extend: {},
},
plugins: [],
}

Add the @tailwind directives for each Tailwind's layers to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the dev server.

npm run dev

2. Import and use a component

To use the icons in our Blocks we install. To get the same icons from the examples, we use version 1.0.6.

npm i @heroicons/react@1.0.6

After importing the Card component, we assemble a card using its default styling.

import { Card } from "@tremor/react";

export default () => <Card></Card>;

The rendered Card component:

3. Add a Metric and Text component

To create our first KPI, we import the Metric and Text component and place them within the card component. We use utilities in the className attribtute to reduce the card's width and to center it horizontally.


import { Card, Text, Metric } from "@tremor/react";

export default () => (
  <Card className="max-w-xs mx-auto">
    <Text>Sales</Text>
    <Metric>$ 34,743</Metric>
  </Card>
);

The resulting block, combining the Card, Text, and Metric component:

Sales

$ 34,743

Add a ProgressBar with textual details

To make our KPI card more insightful, we add a ProgressBar, providing contextual details about our metric. To align both text elements, we also import the Flex component.


import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";

export default () => (
  <Card className="max-w-xs mx-auto">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
    <Flex className="mt-4">
      <Text>32% of annual target</Text>
      <Text>$ 225,000</Text>
    </Flex>
    <ProgressBar percentageValue={32} className="mt-2" />
  </Card>
);

Sales

$ 71,465

32% of annual target

$ 225,000

Your First Dashboard