How the integrate Tremor to build interactive dashboards

Jonathan Wilke

Jonathan Wilke

10/12/2023

#UI#TailwindCSS
How the integrate Tremor to build interactive dashboards

In this guide we will show you how you can integrate Tremor to build beautiful and interactive dashboards with ease.

1. Installation

To install Tremor, you simply have add the package to your Next.js application:

pnpm add @tremor/react --filter web

Next we add the tremor components as a content path to the tailwind config:

const config: Config = {
  presets: [tailwindConfig],
  content: [
    "./app/**/*.tsx",
    "./modules/**/*.tsx",
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
  ],
};

2. Confiure Tremor styles

Add the following lines to your Taiwind CSS configuration in the /packages/config/tailwind/index.ts file:

const config: Config = {
  // ...
  theme: {
    // ...
    transparent: "transparent",
    current: "currentColor",
    extend: {
      boxShadow: {
        // ...
        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "tremor-card":
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "tremor-dropdown":
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      },
      borderRadius: {
        "tremor-small": "calc(0.75rem - 4px)",
        "tremor-default": "calc(0.75rem - 2px)",
        "tremor-full": "9999px",
      },
      fontSize: {
        "tremor-label": "0.75rem",
        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
      },
      colors: {
        // ...
        tremor: {
          brand: {
            faint: colorVariable("--colors-background"),
            muted: colorVariable("--colors-muted"),
            subtle: colorVariable("--colors-accent"),
            DEFAULT: colorVariable("--colors-primary"),
            emphasis: colorVariable("--colors-primary"),
            inverted: colorVariable("--colors-primary-foreground"),
          },
          background: {
            muted: colorVariable("--colors-background"),
            subtle: colorVariable("--colors-muted"),
            DEFAULT: colorVariable("--colors-card"),
            emphasis: colorVariable("--colors-muted-foreground"),
          },
          border: {
            DEFAULT: colorVariable("--colors-border"),
          },
          ring: {
            DEFAULT: colorVariable("--colors-ring"),
          },
          content: {
            subtle: colorVariable("--colors-muted-foreground"),
            DEFAULT: colorVariable("--colors-muted-foreground"),
            emphasis: colorVariable("--colors-foreground"),
            strong: colorVariable("--colors-foreground"),
            inverted: colorVariable("--colors-card"),
          },
        },
      },
    },
  },
  //...
  safelist: [
    {
      pattern:
        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
      variants: ["hover", "ui-selected"],
    },
    {
      pattern:
        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
    {
      pattern:
        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    },
  ],
};

3. Use Tremor components

Now you can use the Tremor components in your application. We have created a simple example in the supastarter repository for you to check out.

Tremor example

"use client";
 
import { AreaChart } from "@tremor/react";
 
const chartdata = [
  {
    date: "Jan 22",
    SemiAnalysis: 2890,
    "The Pragmatic Engineer": 2338,
  },
  // ...
];
 
const dataFormatter = (number: number) => {
  return "$ " + Intl.NumberFormat("us").format(number).toString();
};
 
export function Chart() {
  return (
    <AreaChart
      className="mt-4 h-72"
      data={chartdata}
      index="date"
      categories={["SemiAnalysis", "The Pragmatic Engineer"]}
      colors={["indigo", "cyan"]}
      valueFormatter={dataFormatter}
    />
  );
}

You can learn more about the available Tremor components and how to use them in the offical Tremor documentation.

The ultimate starter kit to build a scalable and production-ready SaaS

Save endless hours of development time and focus on what's important for your customers with our SaaS starter kits for Next.js 14 and Nuxt 3

Get started

Stay up to date

Sign up for our newsletter and we will keep you updated on everything going on with supastarter.