tremor • blocks

KPI Cards

Show data in an aggregated form to display information about the main behavior of a particular data domain.

Card + Metric

Sales

$ 23,456

Profit

$ 13,123

Customers

456

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

const categories = [
  {
    title: "Sales",
    metric: "$ 23,456",
  },
  {
    title: "Profit",
    metric: "$ 13,123",
  },
  {
    title: "Customers",
    metric: "456",
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + Icon

Sales

$ 23,456,456

Profit

$ 13,123

Customers

456

import { Card, Metric, Text, Icon, Flex, Color, Grid } from "@tremor/react";

import { CashIcon, TicketIcon, UserGroupIcon } from "@heroicons/react/solid";

const categories: {
  title: string;
  metric: string;
  icon: any;
  color: Color;
}[] = [
  {
    title: "Sales",
    metric: "$ 23,456,456",
    icon: TicketIcon,
    color: "indigo",
  },
  {
    title: "Profit",
    metric: "$ 13,123",
    icon: CashIcon,
    color: "fuchsia",
  },
  {
    title: "Customers",
    metric: "456",
    icon: UserGroupIcon,
    color: "amber",
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title} decoration="top" decorationColor={item.color}>
          <Flex justifyContent="start" className="space-x-4">
            <Icon
              icon={item.icon}
              variant="light"
              size="xl"
              color={item.color}
            />
            <div className="truncate">
              <Text>{item.title}</Text>
              <Metric className="truncate">{item.metric}</Metric>
            </div>
          </Flex>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + BadgeDelta

Sales

34.3%

$ 12,699

from $ 9,456

Profit

10.9%

$ 40,598

from $ 45,564

Customers

25.3%

1,072

from 856

import {
  Card,
  Metric,
  Text,
  Flex,
  BadgeDelta,
  DeltaType,
  Grid,
} from "@tremor/react";

const categories: {
  title: string;
  metric: string;
  metricPrev: string;
  delta: string;
  deltaType: DeltaType;
}[] = [
  {
    title: "Sales",
    metric: "$ 12,699",
    metricPrev: "$ 9,456",
    delta: "34.3%",
    deltaType: "moderateIncrease",
  },
  {
    title: "Profit",
    metric: "$ 40,598",
    metricPrev: "$ 45,564",
    delta: "10.9%",
    deltaType: "moderateDecrease",
  },
  {
    title: "Customers",
    metric: "1,072",
    metricPrev: "856",
    delta: "25.3%",
    deltaType: "moderateIncrease",
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Flex alignItems="start">
            <Text>{item.title}</Text>
            <BadgeDelta deltaType={item.deltaType}>{item.delta}</BadgeDelta>
          </Flex>
          <Flex
            justifyContent="start"
            alignItems="baseline"
            className="truncate space-x-3"
          >
            <Metric>{item.metric}</Metric>
            <Text className="truncate">from {item.metricPrev}</Text>
          </Flex>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + BadgeDelta + Text

Sales

$ 12,699

from $ 9,456

34.3%

to previous month

Profit

$ 40,598

from $ 45,564

10.9%

to previous month

Customers

1,072

from 856

25.3%

to previous month

import {
  Card,
  Metric,
  Text,
  Flex,
  BadgeDelta,
  DeltaType,
  Color,
  Grid,
} from "@tremor/react";

const colors: { [key: string]: Color } = {
  increase: "emerald",
  moderateIncrease: "emerald",
  unchanged: "orange",
  moderateDecrease: "rose",
  decrease: "rose",
};

const categories: {
  title: string;
  metric: string;
  metricPrev: string;
  delta: string;
  deltaType: DeltaType;
}[] = [
  {
    title: "Sales",
    metric: "$ 12,699",
    metricPrev: "$ 9,456",
    delta: "34.3%",
    deltaType: "moderateIncrease",
  },
  {
    title: "Profit",
    metric: "$ 40,598",
    metricPrev: "$ 45,564",
    delta: "10.9%",
    deltaType: "moderateDecrease",
  },
  {
    title: "Customers",
    metric: "1,072",
    metricPrev: "856",
    delta: "25.3%",
    deltaType: "moderateIncrease",
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Flex
            justifyContent="start"
            alignItems="baseline"
            className="truncate space-x-3"
          >
            <Metric>{item.metric}</Metric>
            <Text className="truncate">from {item.metricPrev}</Text>
          </Flex>
          <Flex justifyContent="start" className="space-x-2 mt-4">
            <BadgeDelta deltaType={item.deltaType} />
            <Flex justifyContent="start" className="space-x-1 truncate">
              <Text color={colors[item.deltaType]}>{item.delta}</Text>
              <Text className="truncate"> to previous month </Text>
            </Flex>
          </Flex>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + CallOut

Sales

$ 12,699

from $ 9,456

Overperforming (+34.3%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Profit

$ 40,598

from $ 45,564

Underperforming (-10.9%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Customers

1,016

from 1,001

Performing as usual (+1.3%)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

import { Card, Metric, Text, Flex, Callout, Color, Grid } from "@tremor/react";

import {
  TrendingUpIcon,
  TrendingDownIcon,
  ArrowNarrowRightIcon,
} from "@heroicons/react/solid";

const categories: {
  title: string;
  metric: string;
  metricPrev: string;
  delta: string;
  status: string;
  color: Color;
  text: string;
  icon: any;
}[] = [
  {
    title: "Sales",
    metric: "$ 12,699",
    metricPrev: "$ 9,456",
    delta: "+34.3%",
    status: "Overperforming",
    color: "emerald",
    text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.",
    icon: TrendingUpIcon,
  },
  {
    title: "Profit",
    metric: "$ 40,598",
    metricPrev: "$ 45,564",
    delta: "-10.9%",
    status: "Underperforming",
    color: "amber",
    text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.",
    icon: TrendingDownIcon,
  },
  {
    title: "Customers",
    metric: "1,016",
    metricPrev: "1,001",
    delta: "+1.3%",
    status: "Performing as usual",
    color: "blue",
    text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.",
    icon: ArrowNarrowRightIcon,
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Flex
            justifyContent="start"
            alignItems="baseline"
            className="space-x-3 truncate"
          >
            <Metric>{item.metric}</Metric>
            <Text>from {item.metricPrev}</Text>
          </Flex>
          <Callout
            className="mt-6"
            title={`${item.status} (${item.delta})`}
            icon={item.icon}
            color={item.color}
          >
            {item.text}
          </Callout>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + ProgressBar

Sales

$ 12,699

15.9% ($ 12,699)

$ 80,000

Profit

$ 45,564

36.5% ($ 45,564)

$ 125,000

Customers

1,072

53.6% (1,072)

2,000

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

const categories = [
  {
    title: "Sales",
    metric: "$ 12,699",
    percentageValue: 15.9,
    target: "$ 80,000",
  },
  {
    title: "Profit",
    metric: "$ 45,564",
    percentageValue: 36.5,
    target: "$ 125,000",
  },
  {
    title: "Customers",
    metric: "1,072",
    percentageValue: 53.6,
    target: "2,000",
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
          <Flex className="mt-4">
            <Text className="truncate">{`${item.percentageValue}% (${item.metric})`}</Text>
            <Text>{item.target}</Text>
          </Flex>
          <ProgressBar
            percentageValue={item.percentageValue}
            className="mt-2"
          />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Tracker + Icons

Website

Uptime

98.3%

Jul 14

Aug 23

Point of Sales

Uptime

97.1%

Jul 14

Aug 23

Webshop

Uptime

99.4%

Jul 14

Aug 23

import {
  ArrowCircleDownIcon,
  CogIcon,
  MinusCircleIcon,
  CheckCircleIcon,
} from "@heroicons/react/solid";

import {
  Card,
  Icon,
  Title,
  Text,
  Flex,
  Tracker,
  Color,
  Grid,
} from "@tremor/react";

interface Tracker {
  color: Color;
  tooltip: string;
}

const website: Tracker[] = [
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "gray", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
];

const pos: Tracker[] = [
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "gray", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "gray", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
];

const webshop: Tracker[] = [
  { color: "emerald", tooltip: "Operational" },
  { color: "gray", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
];

const categories = [
  {
    title: "Website",
    metric: "98.3%",
    data: website,
  },
  {
    title: "Point of Sales",
    metric: "97.1%",
    data: pos,
  },
  {
    title: "Webshop",
    metric: "99.4%",
    data: webshop,
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Flex>
            <Title className="w-full">{item.title}</Title>
            <Flex justifyContent="end" className="-space-x-2 -mr-2">
              <Icon
                icon={CheckCircleIcon}
                color="emerald"
                tooltip="Operational"
              />
              <Icon
                icon={ArrowCircleDownIcon}
                color="yellow"
                tooltip="Degraded"
              />
              <Icon icon={CogIcon} color="gray" tooltip="Maintenance" />
              <Icon icon={MinusCircleIcon} color="rose" tooltip="Downtime" />
            </Flex>
          </Flex>
          <Flex className="mt-4">
            <Text>Uptime</Text>
            <Text>{item.metric}</Text>
          </Flex>
          <Tracker data={item.data} className="mt-2" />
          <Flex className="mt-2">
            <Text>Jul 14</Text>
            <Text>Aug 23</Text>
          </Flex>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + AreaChart + BadgeDelta

Sales

34.3%

$ 12,699

from $ 9,456

Profit

18.1%

$ 12,348

from $ 10,456

Customers

12.3%

948

from 1,082

import {
  Card,
  Metric,
  Text,
  AreaChart,
  BadgeDelta,
  Flex,
  DeltaType,
  Grid,
} from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
    Customers: 4938,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
    Customers: 2938,
  },
  // ...
  {
    Month: "Jul 21",
    Sales: 3490,
    Profit: 4300,
    Customers: 2345,
  },
];

const categories: {
  title: string;
  metric: string;
  metricPrev: string;
  delta: string;
  deltaType: DeltaType;
}[] = [
  {
    title: "Sales",
    metric: "$ 12,699",
    metricPrev: "$ 9,456",
    delta: "34.3%",
    deltaType: "moderateIncrease",
  },
  {
    title: "Profit",
    metric: "$ 12,348",
    metricPrev: "$ 10,456",
    delta: "18.1%",
    deltaType: "moderateIncrease",
  },
  {
    title: "Customers",
    metric: "948",
    metricPrev: "1,082",
    delta: "12.3%",
    deltaType: "moderateDecrease",
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Flex alignItems="start">
            <Text>{item.title}</Text>
            <BadgeDelta deltaType={item.deltaType}>{item.delta}</BadgeDelta>
          </Flex>
          <Flex
            className="space-x-3 truncate"
            justifyContent="start"
            alignItems="baseline"
          >
            <Metric>{item.metric}</Metric>
            <Text>from {item.metricPrev}</Text>
          </Flex>
          <AreaChart
            className="mt-6 h-28"
            data={data}
            index="Month"
            valueFormatter={valueFormatter}
            categories={[item.title]}
            colors={["blue"]}
            showXAxis={true}
            showGridLines={false}
            startEndOnly={true}
            showYAxis={false}
            showLegend={false}
          />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + List + Icon + InlineButton

Transaction Volume

March 2022

Groceries
24 transactions
$ 230
IT & Office
4 transactions
$ 990
Travel
11 transactions
$ 2,345
Insurance
2 transactions
$ 1,450

Transaction Volume

April 2022

Food
32 transactions
$ 490
Travel
3 transactions
$ 678
IT & Office
2 transactions
$ 120
Transport
12 transactions
$ 560

Transaction Volume

May 2022

Sports
89 transactions
$ 2,300.90
Groceries
9 transactions
$ 1,087
Travel
19 transactions
$ 1,030
Restaurants
8 transactions
$ 129

import {
  Card,
  List,
  ListItem,
  Icon,
  Text,
  Bold,
  Flex,
  Title,
  Button,
  Color,
  Grid,
} from "@tremor/react";

import {
  BriefcaseIcon,
  DesktopComputerIcon,
  ShieldExclamationIcon,
  ShoppingBagIcon,
  ArrowNarrowRightIcon,
  LightningBoltIcon,
  HomeIcon,
  TruckIcon,
} from "@heroicons/react/solid";

type TransactionCategory = {
  name: string;
  icon: any;
  color: Color;
  numTransactions: number;
  amount: string;
};

const march: TransactionCategory[] = [
  {
    name: "Groceries",
    icon: ShoppingBagIcon,
    color: "sky",
    numTransactions: 24,
    amount: "$ 230",
  },
  {
    name: "IT & Office",
    icon: DesktopComputerIcon,
    color: "orange",
    numTransactions: 4,
    amount: "$ 990",
  },
  {
    name: "Travel",
    icon: BriefcaseIcon,
    color: "pink",
    numTransactions: 11,
    amount: "$ 2,345",
  },
  {
    name: "Insurance",
    icon: ShieldExclamationIcon,
    color: "emerald",
    numTransactions: 2,
    amount: "$ 1,450",
  },
];

const april: TransactionCategory[] = [
  {
    name: "Food",
    icon: ShoppingBagIcon,
    color: "teal",
    numTransactions: 32,
    amount: "$ 490",
  },
  {
    name: "Travel",
    icon: BriefcaseIcon,
    color: "pink",
    numTransactions: 3,
    amount: "$ 678",
  },
  {
    name: "IT & Office",
    icon: DesktopComputerIcon,
    color: "orange",
    numTransactions: 2,
    amount: "$ 120",
  },
  {
    name: "Transport",
    icon: TruckIcon,
    color: "indigo",
    numTransactions: 12,
    amount: "$ 560",
  },
];

const may: TransactionCategory[] = [
  {
    name: "Sports",
    icon: LightningBoltIcon,
    color: "rose",
    numTransactions: 89,
    amount: "$ 2,300.90",
  },
  {
    name: "Groceries",
    icon: ShoppingBagIcon,
    color: "emerald",
    numTransactions: 9,
    amount: "$ 1,087",
  },
  {
    name: "Travel",
    icon: BriefcaseIcon,
    color: "pink",
    numTransactions: 19,
    amount: "$ 1,030",
  },
  {
    name: "Restaurants",
    icon: HomeIcon,
    color: "amber",
    numTransactions: 8,
    amount: "$ 129",
  },
];

const months = [
  {
    name: "March 2022",
    data: march,
  },
  {
    name: "April 2022",
    data: april,
  },
  {
    name: "May 2022",
    data: may,
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {months.map((item) => (
        <Card key={item.name}>
          <Title>Transaction Volume</Title>
          <Text>{item.name}</Text>
          <List className="mt-4">
            {item.data.map((transaction) => (
              <ListItem key={transaction.name}>
                <Flex justifyContent="start" className="truncate space-x-4">
                  <Icon
                    variant="light"
                    icon={transaction.icon}
                    size="md"
                    color={transaction.color}
                  />
                  <div className="truncate">
                    <Text className="truncate">
                      <Bold>{transaction.name}</Bold>
                    </Text>
                    <Text className="truncate">
                      {`${transaction.numTransactions} transactions`}
                    </Text>
                  </div>
                </Flex>
                <Text>{transaction.amount}</Text>
              </ListItem>
            ))}
          </List>
          <Button
            size="sm"
            variant="light"
            icon={ArrowNarrowRightIcon}
            iconPosition="right"
            className="mt-4"
          >
            View details
          </Button>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + List + ProgressBar

Sales • Location A

$ 34,456

Product A
34%
Product B
24%
Product C
11%
Product D
10%
Product E
8%

Sales • Location B

$ 94,700

Product C
89%
Product E
79%
Product A
72%
Product B
19%
Product D
18%

Sales • Location C

$ 62,123

Product A
45%
Product D
35%
Product C
75%
Product B
68%
Product E
56%

import {
  Card,
  Metric,
  Text,
  List,
  ListItem,
  ProgressBar,
  Block,
  Grid,
} from "@tremor/react";

const locationA = [
  {
    name: "Product A",
    share: 34,
    amount: "$ 11,715",
  },
  {
    name: "Product B",
    share: 24,
    amount: "$ 8,269",
  },
  {
    name: "Product C",
    share: 11,
    amount: "$ 3,790",
  },
  {
    name: "Product D",
    share: 10,
    amount: "$ 3,445",
  },
  {
    name: "Product E",
    share: 8,
    amount: "$ 2,756",
  },
];

const locationB = [
  {
    name: "Product C",
    share: 89,
    amount: "$ 84,283",
  },
  {
    name: "Product E",
    share: 79,
    amount: "$ 74,813",
  },
  {
    name: "Product A",
    share: 72,
    amount: "$ 68,184",
  },
  {
    name: "Product B",
    share: 19,
    amount: "$ 17,993",
  },
  {
    name: "Product D",
    share: 18,
    amount: "$ 17,046",
  },
];

const locationC = [
  {
    name: "Product A",
    share: 45,
    amount: "$ 27,955",
  },
  {
    name: "Product D",
    share: 35,
    amount: "$ 21,743",
  },
  {
    name: "Product C",
    share: 75,
    amount: "$ 46,592",
  },
  {
    name: "Product B",
    share: 68,
    amount: "$ 42,243",
  },
  {
    name: "Product E",
    share: 56,
    amount: "$ 34,788",
  },
];

const categories = [
  {
    title: "Sales • Location A",
    metric: "$ 34,456",
    data: locationA,
  },
  {
    title: "Sales • Location B",
    metric: "$ 94,700",
    data: locationB,
  },
  {
    title: "Sales • Location C",
    metric: "$ 62,123",
    data: locationC,
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
          <List className="mt-4">
            {item.data.map((product) => (
              <ListItem key={product.name}>
                <div className="w-full">
                  <Text>{product.name}</Text>
                  <ProgressBar
                    percentageValue={product.share}
                    label={`${product.share}%`}
                    tooltip={product.amount}
                  />
                </div>
              </ListItem>
            ))}
          </List>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + List + BadgeDelta

Sales

$ 23,456

Country

WoW (%)

Switzerland
18.3%
Germany
8.3%
Italy
1.6%
France
-5.1%

Profit

$ 16,450

Country

WoW (%)

Switzerland
1.3%
Germany
3.3%
Italy
2.6%
France
-8.2%

Customers

456

Country

WoW (%)

Switzerland
-6.3%
Germany
6.7%
Italy
2.9%
France
1.2%

import {
  Card,
  Metric,
  Text,
  List,
  ListItem,
  BadgeDelta,
  Flex,
  Bold,
  DeltaType,
  Grid,
} from "@tremor/react";

const sales = [
  {
    name: "Switzerland",
    stat: "18.3%",
    status: "increase",
  },
  {
    name: "Germany",
    stat: "8.3%",
    status: "moderateIncrease",
  },
  {
    name: "Italy",
    stat: "1.6%",
    status: "unchanged",
  },
  {
    name: "France",
    stat: "-5.1%",
    status: "moderateDecrease",
  },
];

const profit = [
  {
    name: "Switzerland",
    stat: "1.3%",
    status: "unchanged",
  },
  {
    name: "Germany",
    stat: "3.3%",
    status: "moderateIncrease",
  },
  {
    name: "Italy",
    stat: "2.6%",
    status: "moderateIncrease",
  },
  {
    name: "France",
    stat: "-8.2%",
    status: "decrease",
  },
];

const customers = [
  {
    name: "Switzerland",
    stat: "-6.3%",
    status: "moderateDecrease",
  },
  {
    name: "Germany",
    stat: "6.7%",
    status: "increase",
  },
  {
    name: "Italy",
    stat: "2.9%",
    status: "moderateIncrease",
  },
  {
    name: "France",
    stat: "1.2%",
    status: "unchanged",
  },
];

const categories = [
  {
    title: "Sales",
    metric: "$ 23,456",
    data: sales,
  },
  {
    title: "Profit",
    metric: "$ 16,450",
    data: profit,
  },
  {
    title: "Customers",
    metric: "456",
    data: customers,
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
          <Flex className="mt-6">
            <Text>
              <Bold>Country</Bold>
            </Text>
            <Text>
              <Bold>WoW (%)</Bold>
            </Text>
          </Flex>
          <List className="mt-1">
            {item.data.map((country) => (
              <ListItem key={country.name}>
                <Flex justifyContent="start" className="truncate space-x-2.5">
                  <BadgeDelta deltaType={country.status as DeltaType} />
                  <Text className="truncate">{country.name}</Text>
                </Flex>
                <Text>{country.stat}</Text>
              </ListItem>
            ))}
          </List>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + CategoryBar + Legend

Total users

10,345

100

Active users
Inactive users

Total Jira tickets

120

100

Done
In Review
In Implementation

Total interviews

100

Offer received
In progress
Rejected

import {
  Card,
  Metric,
  Text,
  CategoryBar,
  Legend,
  Color,
  Grid,
} from "@tremor/react";

const categories: {
  title: string;
  metric: string;
  subCategoryPercentageValues: number[];
  subCategroyColors: Color[];
  subCategoryTitles: string[];
}[] = [
  {
    title: "Total users",
    metric: "10,345",
    subCategoryPercentageValues: [30, 70],
    subCategroyColors: ["emerald", "red"],
    subCategoryTitles: ["Active users", "Inactive users"],
  },
  {
    title: "Total Jira tickets",
    metric: "120",
    subCategoryPercentageValues: [10, 40, 50],
    subCategroyColors: ["indigo", "violet", "purple"],
    subCategoryTitles: ["Done", "In Review", "In Implementation"],
  },
  {
    title: "Total interviews",
    metric: "22",
    subCategoryPercentageValues: [30, 40, 30],
    subCategroyColors: ["emerald", "yellow", "rose"],
    subCategoryTitles: ["Offer received", "In progress", "Rejected"],
  },
];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
          <CategoryBar
            categoryPercentageValues={item.subCategoryPercentageValues}
            colors={item.subCategroyColors}
            className="mt-4"
          />
          <Legend
            categories={item.subCategoryTitles}
            colors={item.subCategroyColors}
            className="mt-3"
          />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + ProgressBar + Accordion

Average Ground Coverage Ratio (GCR)

41%

Last Inspection: 15.11.2022

Average Performance Ratio

83%

Last Inspection: Today

import {
  Card,
  Text,
  Flex,
  ProgressBar,
  Grid,
  Icon,
  Title,
  Divider,
  Bold,
  Accordion,
  AccordionBody,
  AccordionHeader,
  BarList,
  Color,
} from "@tremor/react";

import { ArrowsExpandIcon, LightningBoltIcon } from "@heroicons/react/solid";

interface Data {
  name: string;
  value: number;
}

interface Category {
  title: string;
  percentageValue: number;
  icon: any;
  color: Color;
  date: string;
  info: string;
  data: Data[];
}

const card: Category[] = [
  {
    title: "Average Ground Coverage Ratio (GCR)",
    percentageValue: 41,
    icon: ArrowsExpandIcon,
    color: "rose",
    date: "15.11.2022",
    info: "Single Panel GCR in %",
    data: [
      { name: "Panel 1", value: 53 },
      { name: "Panel 2", value: 24 },
      { name: "Panel 3", value: 38 },
      { name: "Panel 4", value: 33 },
      { name: "Panel 5", value: 57 },
    ],
  },
  {
    title: "Average Performance Ratio",
    percentageValue: 83,
    icon: LightningBoltIcon,
    color: "indigo",
    date: "Today",
    info: "Single Panel Performance in %",
    data: [
      { name: "Panel 1", value: 96 },
      { name: "Panel 2", value: 62 },
      { name: "Panel 3", value: 78 },
      { name: "Panel 4", value: 82 },
      { name: "Panel 5", value: 97 },
    ],
  },
];

const dataFormatter = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()}%`;

export default function Example() {
  return (
    <Grid numColsSm={1} numColsLg={2} className="gap-6">
      {card.map((item) => (
        <Card
          decoration="left"
          decorationColor={item.color}
          key={item.title}
          className="h-fit"
        >
          <Flex justifyContent="start" className="space-x-4">
            <Icon
              variant="outlined"
              icon={item.icon}
              size="sm"
              color={item.color}
            />
            <Title className="truncate">{item.title}</Title>
          </Flex>
          <Flex className="space-x-3 mt-3">
            <ProgressBar
              className="mt-0"
              percentageValue={item.percentageValue}
              color={item.color}
            />
            <Title>{item.percentageValue}%</Title>
          </Flex>
          <Divider />
          <Text>
            Last Inspection: <Bold>{item.date}</Bold>
          </Text>
          <Accordion className="mt-4">
            <AccordionHeader>
              <div className="space-y-2">
                <Text>{item.info}</Text>
              </div>
            </AccordionHeader>
            <AccordionBody>
              <BarList
                key={item.title}
                data={item.data}
                className="mt-2"
                color={item.color}
                valueFormatter={dataFormatter}
              />
            </AccordionBody>
          </Accordion>
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Line Chart + Callout

Today's Sales

$ 276

Today
Peer average

7.8% above peer average

Today's sales currently outperform the sales average of all peer products in North West region

import {
  Button,
  Card,
  Callout,
  Flex,
  Tab,
  TabList,
  Text,
  Metric,
  Legend,
  LineChart,
} from "@tremor/react";

import {
  ArrowNarrowRightIcon,
  TrendingUpIcon,
  TrendingDownIcon,
} from "@heroicons/react/solid";
import { useState } from "react";

interface Data {
  hour: string;
  today: number;
  average: number;
  yesterday: number;
}

const sales: Data[] = [
  {
    hour: "00:00",
    today: 90,
    average: 66,
    yesterday: 23,
  },
  {
    hour: "02:00",
    today: 45,
    average: 40,
    yesterday: 32,
  },
  {
    hour: "04:00",
    today: 68,
    average: 55,
    yesterday: 29,
  },
  {
    hour: "06:00",
    today: 73,
    average: 83,
    yesterday: 68,
  },
  {
    hour: "08:00",
    today: 79,
    average: 102,
    yesterday: 43,
  },
  {
    hour: "10:00",
    today: 70,
    average: 75,
    yesterday: 39,
  },
  {
    hour: "12:00",
    today: 50,
    average: 20,
    yesterday: 34,
  },
  {
    hour: "14:00",
    today: 81,
    average: 66,
    yesterday: 59,
  },
  {
    hour: "16:00",
    today: 90,
    average: 92,
    yesterday: 78,
  },
  {
    hour: "18:00",
    today: 101,
    average: 88,
    yesterday: 65,
  },
  {
    hour: "20:00",
    today: 50,
    average: 63,
    yesterday: 34,
  },
  {
    hour: "22:00",
    today: 35,
    average: 25,
    yesterday: 21,
  },
  {
    hour: "23:59",
    today: 43,
    average: 23,
    yesterday: 12,
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function Example() {
  const [selectedComparison, setSelectedComparison] = useState("average");
  return (
    <Card className="max-w-md mx-auto">
      <Text>Today's Sales</Text>
      <Metric className="mt-1">$ 276</Metric>
      <TabList
        defaultValue="average"
        onValueChange={(value) => setSelectedComparison(value)}
        className="mt-6"
      >
        <Tab value="average" text="vs. peer average" />
        <Tab value="yesterday" text="vs. yesterday" />
      </TabList>
      {selectedComparison === "average" ? (
        <>
          <LineChart
            className="mt-4 h-56"
            data={sales}
            index="hour"
            categories={["today", "average"]}
            colors={["blue", "slate"]}
            showYAxis={false}
            showLegend={false}
            valueFormatter={valueFormatter}
            showAnimation={true}
          />
          <Flex justifyContent="end">
            <Legend
              categories={["Today", "Peer average"]}
              colors={["blue", "slate"]}
              className="mt-3"
            />
          </Flex>
          <Callout
            title="7.8% above peer average"
            icon={TrendingUpIcon}
            color="emerald"
            className="mt-4"
          >
            Today's sales currently outperform the sales average of all peer
            products in North West region
          </Callout>
        </>
      ) : (
        <>
          <LineChart
            className="mt-4 h-56"
            data={sales}
            index="hour"
            categories={["today", "yesterday"]}
            colors={["blue", "slate"]}
            showYAxis={false}
            showLegend={false}
            valueFormatter={valueFormatter}
            showAnimation={true}
          />
          <Flex justifyContent="end">
            <Legend
              categories={["Today", "Yesterday"]}
              colors={["blue", "slate"]}
              className="mt-3"
            />
          </Flex>
          <Callout
            title="-14.8% below yesterday"
            icon={TrendingDownIcon}
            color="rose"
            className="mt-4"
          >
            Today's sales underperform the sales yesterday.
          </Callout>
        </>
      )}
      <Button
        size="sm"
        variant="light"
        icon={ArrowNarrowRightIcon}
        iconPosition="right"
        color="slate"
        className="mt-5"
      >
        View details
      </Button>
    </Card>
  );
}
a;

Found a bug? let us know

Card + Metric + AreaChart + Tabs

Sales • YTD

$ 12,699

Profit • YTD

$ 12,348

Customers • YTD

948

import {
  Card,
  Metric,
  Text,
  AreaChart,
  Tab,
  TabList,
  Grid,
} from "@tremor/react";

import { useState } from "react";

const sales = [
  {
    Month: "Jan 21",
    "This year": 2890,
    "Last year": 2190,
    Peer: 1930,
  },
  {
    Month: "Feb 21",
    "This year": 1890,
    "Last year": 2230,
    Peer: 1600,
  },
  {
    Month: "Mar 21",
    "This year": 2190,
    "Last year": 1321,
    Peer: 2480,
  },
  {
    Month: "Apr 21",
    "This year": 3470,
    "Last year": 2980,
    Peer: 3250,
  },
  {
    Month: "May 21",
    "This year": 2170,
    "Last year": 2678,
    Peer: 1890,
  },
  {
    Month: "Jun 21",
    "This year": 3170,
    "Last year": 2089,
    Peer: 2940,
  },
  {
    Month: "Jul 21",
    "This year": 3490,
    "Last year": 2187,
    Peer: 3200,
  },
];

const profit = [
  {
    Month: "Jan 21",
    "This year": 2400,
    "Last year": 2650,
    Peer: 2100,
  },
  {
    Month: "Feb 21",
    "This year": 1990,
    "Last year": 2300,
    Peer: 1450,
  },
  {
    Month: "Mar 21",
    "This year": 1890,
    "Last year": 2450,
    Peer: 2100,
  },
  {
    Month: "Apr 21",
    "This year": 1908,
    "Last year": 1890,
    Peer: 1780,
  },
  {
    Month: "May 21",
    "This year": 4800,
    "Last year": 4250,
    Peer: 4100,
  },
  {
    Month: "Jun 21",
    "This year": 3800,
    "Last year": 2900,
    Peer: 2100,
  },
  {
    Month: "Jul 21",
    "This year": 4300,
    "Last year": 3850,
    Peer: 3100,
  },
];

const customers = [
  {
    Month: "Jan 21",
    "This year": 4300,
    "Last year": 1505,
    Peer: 3010,
  },
  {
    Month: "Feb 21",
    "This year": 4380,
    "Last year": 1960,
    Peer: 2800,
  },
  {
    Month: "Mar 21",
    "This year": 2390,
    "Last year": 1850,
    Peer: 2190,
  },
  {
    Month: "Apr 21",
    "This year": 1590,
    "Last year": 3910,
    Peer: 3310,
  },
  {
    Month: "May 21",
    "This year": 4630,
    "Last year": 3450,
    Peer: 3100,
  },
  {
    Month: "Jun 21",
    "This year": 4890,
    "Last year": 3450,
    Peer: 1340,
  },
  {
    Month: "Jul 21",
    "This year": 3290,
    "Last year": 3150,
    Peer: 2100,
  },
];

const valueFormatterNumber = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()}`;

const valueFormatterCurrency = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

const categories = [
  {
    title: "Sales • YTD",
    metric: "$ 12,699",
    data: sales,
    valueFormatter: valueFormatterCurrency,
  },
  {
    title: "Profit • YTD",
    metric: "$ 12,348",
    data: profit,
    valueFormatter: valueFormatterCurrency,
  },
  {
    title: "Customers • YTD",
    metric: "948",
    data: customers,
    valueFormatter: valueFormatterNumber,
  },
];

const LineChartView = ({ category }: { category: any }) => {
  const [selectedView, setSelectedView] = useState("Peer");

  return (
    <>
      <TabList
        className="mt-6"
        defaultValue="Peer"
        onValueChange={(value) => setSelectedView(value)}
      >
        <Tab value="Peer" text="Peer group" />
        <Tab value="Last year" text="Same period last year" />
      </TabList>
      <AreaChart
        className="h-40 mt-4"
        data={category.data}
        index="Month"
        categories={["This year", selectedView]}
        colors={["blue", "slate"]}
        valueFormatter={category.valueFormatter}
        showXAxis={true}
        startEndOnly={true}
        showYAxis={false}
        showLegend={false}
      />
    </>
  );
};

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Metric>{item.metric}</Metric>
          <LineChartView category={item} />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

Card + Metric + CategoryBar

Sales – NPS

9.5

/ 10

Profit – NPS

8.2

/ 10

Customers – NPS

6.8

/ 10

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

const categories = [
  {
    title: "Sales – NPS",
    metric: "9.5",
    percentageValue: 95,
  },
  {
    title: "Profit – NPS",
    metric: "8.2",
    percentageValue: 82,
  },
  {
    title: "Customers – NPS",
    metric: "6.8",
    percentageValue: 68,
  },
];

const subCategoryPercentageValues = [10, 25, 45, 20];

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {categories.map((item) => (
        <Card key={item.title}>
          <Text>{item.title}</Text>
          <Flex
            justifyContent="start"
            alignItems="baseline"
            className="space-x-1"
          >
            <Metric>{item.metric}</Metric>
            <Text>/ 10</Text>
          </Flex>
          <CategoryBar
            categoryPercentageValues={subCategoryPercentageValues}
            colors={["rose", "orange", "yellow", "emerald"]}
            percentageValue={item.percentageValue}
            tooltip={item.metric}
            showLabels={false}
            className="mt-5"
          />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know

KPI Card + BarList

Website

10,234

Total views

Pages

Views

/home

/contact

/gallery

/august-discount-offer

/case-studies

1,230

751

471

280

Online Shop

12,543

Total views

Pages

Views

/home

/imprint

/shop

/pricing

453

351

271

191

Mobile App

2,543

Total views

Pages

Views

/shop

/product-features

/about

/login

/downloads

789

676

564

234

191

import { Card, Metric, Text, Title, BarList, Flex, Grid } from "@tremor/react";

const website = [
  { name: "/home", value: 1230 },
  { name: "/contact", value: 751 },
  { name: "/gallery", value: 471 },
  { name: "/august-discount-offer", value: 280 },
  { name: "/case-studies", value: 78 },
];

const shop = [
  { name: "/home", value: 453 },
  { name: "/imprint", value: 351 },
  { name: "/shop", value: 271 },
  { name: "/pricing", value: 191 },
];

const app = [
  { name: "/shop", value: 789 },
  { name: "/product-features", value: 676 },
  { name: "/about", value: 564 },
  { name: "/login", value: 234 },
  { name: "/downloads", value: 191 },
];

const data = [
  {
    category: "Website",
    stat: "10,234",
    data: website,
  },
  {
    category: "Online Shop",
    stat: "12,543",
    data: shop,
  },
  {
    category: "Mobile App",
    stat: "2,543",
    data: app,
  },
];

const dataFormatter = (number: number) =>
  Intl.NumberFormat("us").format(number).toString();

export default function Example() {
  return (
    <Grid numColsSm={2} numColsLg={3} className="gap-6">
      {data.map((item) => (
        <Card key={item.category}>
          <Title>{item.category}</Title>
          <Flex
            justifyContent="start"
            alignItems="baseline"
            className="space-x-2"
          >
            <Metric>{item.stat}</Metric>
            <Text>Total views</Text>
          </Flex>
          <Flex className="mt-6">
            <Text>Pages</Text>
            <Text className="text-right">Views</Text>
          </Flex>
          <BarList
            data={item.data}
            valueFormatter={dataFormatter}
            className="mt-2"
          />
        </Card>
      ))}
    </Grid>
  );
}

Found a bug? let us know