1. Getting Started
  2. Installation

Getting Started

Installation

Here we create a new project either with React.js or Next.js, install tremor and create a simple KPI component with it.

Prerequisites

  • The latest version of node.js.
  • A text editor. Here we recommend VS Code.
  • A terminal.

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


1. Installation

You can use tremor either within a React or Next.js Project. For new projects, we recommend using Next.js, as it also provides a simple deployment workflow through the Vercel platform.

Option A: Using Create React App

In our terminal, we create a new React project:

npx create-react-app my-project --template typescript
cd my-project

Note: Using the --template typescript option is optional here.

Install tremor from your command line via npm.

npm install @tremor/react

Import the tremor stylesheet into the App.js / App.tsx file:

import '@tremor/react/dist/esm/tremor.css';

Note: If you are importing other CSS files along with tremor.css, make sure to add the above import statement as the last one, in order to avoid unintentional CSS conflicts.

Finally, run the dev server.

npm start

Option B: Using Next.js

Note: 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. More infos on the directive and the usage of third-party libraries in Next.js 13 can be found in the Next.js docs.

In our terminal, we create a new Next project:

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

Note: Using the --typescript option is optional here.

Install tremor from your command line via npm.

npm install @tremor/react

Import the tremor stylesheet into the _app.js / _app.tsx file:

import '@tremor/react/dist/esm/tremor.css'

Note: If you are importing other CSS files along with tremor.css, make sure to add the above import statement as the last one, in order to avoid unintentional CSS conflicts.

Finally, run the dev server.

npm run dev

2. Import a component

We create a component in a new file and import the Card component.

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

3. Using a component

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

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

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

The rendered Card component:

4. Add a Metric and Text component

To create our first composition, we import the Metric and Text component and place it within the card component and use the maxWidth property to reduce the card's width.

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

export default () => (
  <Card maxWidth="max-w-sm">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
  </Card>
);

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

Sales

$ 34,743

5. 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 maxWidth="max-w-sm">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
    <Flex marginTop="mt-4">
      <Text>32% of annual target</Text>
      <Text>$ 225,000</Text>
    </Flex>
    <ProgressBar percentageValue={32} marginTop="mt-2" />
  </Card>
);

Sales

$ 71,465

32% of annual target

$ 225,000