Tremor Has a Free API That Most Developers Dont Know About

#react #dashboard #charts #webdev

Tremor is a React library for building dashboards fast. It provides beautiful, prebuilt chart and UI components designed specifically for data-heavy applications.

KPI Cards

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

function KPICard() {
  return (
    <Card className="max-w-xs">
      <Text>Sales</Text>
      <Metric>$71,465</Metric>
      <Flex className="mt-4">
        <Text>32% of annual target</Text>
        <Text>$225,000</Text>
      </Flex>
      <ProgressBar value={32} className="mt-2" />
    </Card>
  );
}

Area Chart

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

const data = [
  { date: "Jan 23", Revenue: 2890, Profit: 2338 },
  { date: "Feb 23", Revenue: 2756, Profit: 2103 },
  { date: "Mar 23", Revenue: 3322, Profit: 2194 },
];

<AreaChart
  data={data}
  index="date"
  categories={["Revenue", "Profit"]}
  colors={["indigo", "cyan"]}
  valueFormatter={(v) => `$${Intl.NumberFormat("us").format(v)}`}
  yAxisWidth={60}
/>

Bar List

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

const pages = [
  { name: "/home", value: 1230 },
  { name: "/about", value: 751 },
  { name: "/pricing", value: 471 },
];

<BarList data={pages} />