@tremor/react

The react library to build dashboards fast

Tremor lets you create simple and modular components to build insightful dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.

Getting Started

1. Create a Next.js project

We start by creating a new Next.js project with Create Next App.

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

2. Install Tailwind CSS

We install Tailwind CSS using npm and initialize the configuration files.

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

3. Set template paths

We add the following paths to our tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives

We add the following directives to our globals.css file.

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

5. Install the tremor library

Install tremor from your command line via npm. And run our build process. Since we are in beta, please be aware that there might be breaking changes in the future.

npm install @tremor/react

npm run dev

💡 Hint: If you want to see how you can build your first dashboard, have a look at our documentation.

Example

With tremor creating an analytical interface is easy.

//Card.tsx
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>
);

Community and Contribution

We are always looking for new ideas or other ways to improve tremor. If you have developed anything cool or found a bug, send us a pull request.

License

Apache License 2.0

Copyright © 2022 Tremor. All rights reserved.