Visualizations

Tracker

Component for visualizing activity logs or other data related to monitoring.

import { Tracker } from '@tremor/react';
export const TrackerHero = () => (  <div className="mx-auto max-w-md">    <Tracker      data={[        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'yellow', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'red', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'yellow', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'red', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'yellow', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },        { color: 'emerald', tooltip: 'Tracker Info' },      ]}    />  </div>);

Import Tracker

Tremor exports one component to create a tracker.

import { Tracker } from '@tremor/react';

Usage example

The example below shows a composition of an uptime monitor by combining a Card with a Tracker component. The tooltip property acts as pop-up information and displays the provided status.

example.comuptime 99.1%

import { Card, Tracker, type Color } from '@tremor/react';
interface Tracker {  color: Color;  tooltip: string;}
const data: Tracker[] = [  { 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: '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' },];
export function TrackerUsageExample() {  return (    <Card className="mx-auto max-w-md">      <p className="text-tremor-default flex items-center justify-between">        <span className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">example.com</span>        <span className="text-tremor-content dark:text-dark-tremor-content">uptime 99.1%</span>      </p>      <Tracker data={data} className="mt-2" />    </Card>  );}

Usage example with a custom colors

The example below shows a Tracker with custom values in the color key. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.

// NOTE: The tailwind.config.js has to be extended with your custom HEX color// ...["[#f0652f]"].flatMap((customColor) => [//   `bg-${customColor}`,//   `border-${customColor}`,//   `hover:bg-${customColor}`,//   `hover:border-${customColor}`,//   `hover:text-${customColor}`,//   `fill-${customColor}`,//   `ring-${customColor}`,//   `stroke-${customColor}`,//   `text-${customColor}`,//   `ui-selected:bg-${customColor}]`,//   `ui-selected:border-${customColor}]`,//   `ui-selected:text-${customColor}`,// ]),
import { Card, Tracker, type CustomColor } from '@tremor/react';
interface Tracker {  color: CustomColor;  tooltip: string;}
const customColorData: Tracker[] = [  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#f0652f', tooltip: 'Online' },  { color: '#ffcc33', tooltip: 'Event' },  { color: '#ffcc33', tooltip: 'Event' },  { color: 'red-800', tooltip: 'Downtime' },  { color: '#ffcc33', tooltip: 'Event' },  { color: '#ffcc33', tooltip: 'Event' },  { color: '#ffcc33', tooltip: 'Event' },  { color: '#ffcc33', tooltip: 'Event' },];
export function TrackerExample2() {  return (    <Card className="mx-auto max-w-md">      <Tracker data={customColorData} />    </Card>  );}

API Reference: Tracker

client component

data: Array of objects, with each object containing an optional key (string), optional color (Color | customColor) and an optional tooltip (string).

Theming

Tracker

Element	Theme Token
Roundness borderRadiustremor-small	borderRadiustremor-small