Package Exports

@tremor/react
@tremor/react/dist/cjs/index.js
@tremor/react/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tremor/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Tremor Banner

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>
);

Tremor Banner

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