1. Getting Started
  2. Installation

Getting Started


Here we create a new project either with React.js, Next.js or Vite.js, 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

Since we have not fully migrated to Next.js 13 yet, if you are using the `app` directory introduced in Next.js 13, wrap your tremor components in another component by using the `"use client"` directive.

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

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: [
    // Path to the 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

If you get the following error while using the `app` directory: `TypeError: Super expression must either be null or a function`, then add the serverComponentsExternalPackages to your `next.config.js`.

const nextConfig = {
experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['@tremor/react'],

2. Import and use a component

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

npm i heroicons@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 Tailwind CSS' utilities in the className property 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">
    <Metric>$ 34,743</Metric>

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


$ 34,743

4. 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">
    <Metric>$ 71,465</Metric>
    <Flex className="mt-4">
      <Text>32% of annual target</Text>
      <Text>$ 225,000</Text>
    <ProgressBar percentageValue={32} className="mt-2" />


$ 71,465

32% of annual target

$ 225,000