tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview

Eval results

Files

Visualization Components

Name: tessl/npm-tremor--react
Author: tessl

Specialized components for displaying progress, rankings, distributions, and status beyond traditional charts.

Visualization Selection

Component	Use Case	Key Props
BarList	Rankings, top N comparisons	`data`, `sortOrder`, `valueFormatter`, `showAnimation`
ProgressBar	Linear progress (0-100)	`value`, `color`, `showAnimation`, `label`
ProgressCircle	Circular progress	`value`, `size`, `children` (center content), `color`
CategoryBar	100% stacked distribution	`values`, `colors`, `markerValue`, `showLabels`
DeltaBar	Change from baseline	`value`, `isIncreasePositive`
MarkerBar	Progress vs target	`value`, `minValue`, `maxValue`
Tracker	Timeline status blocks	`data: {color, tooltip}[]`

BarList

Horizontal bars for rankings and comparisons. Auto-sorts by default.

interface BarListProps<T = any> {
  data: Array<T & {
    value: number; // Required
    name: React.ReactNode; // Required
    key?: string;
    icon?: React.JSXElementConstructor<any>;
    href?: string;
    target?: string;
    color?: Color; // Per-item color override
  }>;
  valueFormatter?: (value: number) => string;
  color?: Color; // Default color for all items
  showAnimation?: boolean;
  onValueChange?: (payload: any) => void;
  sortOrder?: "ascending" | "descending" | "none"; // default: "descending"
}

Examples:

import { BarList, Card, Title } from '@tremor/react';

const data = [
  { name: 'New York', value: 2890 },
  { name: 'London', value: 2756 },
  { name: 'Tokyo', value: 1322 },
];

<Card>
  <Title>Sales by City</Title>
  <BarList
    data={data}
    valueFormatter={(v) => `$${v.toLocaleString()}`}
    className="mt-4"
  />
</Card>

// Custom colors per item
const coloredData = [
  { name: 'Excellent', value: 45, color: 'emerald' },
  { name: 'Good', value: 30, color: 'blue' },
  { name: 'Fair', value: 15, color: 'amber' },
];
<BarList data={coloredData} sortOrder="none" showAnimation={true} />

ProgressBar

Linear progress indicator (0-100).

interface ProgressBarProps {
  value: number; // 0-100 (required)
  label?: string;
  tooltip?: string;
  showAnimation?: boolean;
  color?: Color;
}

Examples:

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

<ProgressBar value={75} color="blue" />

// With label
<div>
  <Flex justifyContent="between" className="mb-2">
    <Text>Project Completion</Text>
    <Text>75%</Text>
  </Flex>
  <ProgressBar value={75} color="blue" />
</div>

// Multiple progress indicators
<Card className="space-y-4">
  <div><Text>Development</Text><ProgressBar value={80} color="blue" /></div>
  <div><Text>Testing</Text><ProgressBar value={60} color="violet" /></div>
  <div><Text>Documentation</Text><ProgressBar value={40} color="amber" /></div>
</Card>

ProgressCircle

Circular progress with optional center content.

interface ProgressCircleProps {
  value?: number; // 0-100
  size?: Size; // "xs" | "sm" | "md" | "lg" | "xl"
  color?: Color;
  showAnimation?: boolean;
  tooltip?: string;
  radius?: number; // Custom radius (overrides size)
  strokeWidth?: number; // Custom stroke width (overrides size)
  children?: React.ReactNode; // Center content
}

Examples:

import { ProgressCircle, Card, Text, Grid } from '@tremor/react';

<ProgressCircle value={75} />

// With center content
<ProgressCircle value={65} color="blue">
  <span className="text-2xl font-bold">65%</span>
</ProgressCircle>

// Different sizes
<Grid numItems={3}>
  <ProgressCircle value={85} color="emerald" size="lg">
    <span className="text-xl font-bold">85%</span>
  </ProgressCircle>
  <Text className="mt-2">Complete</Text>
</Grid>

CategoryBar

Segmented bar showing 100% stacked distribution.

interface CategoryBarProps {
  values: number[]; // Must sum to 100
  colors?: Color[];
  markerValue?: number; // Optional marker position (0-100)
  showLabels?: boolean;
  tooltip?: string;
  showAnimation?: boolean;
}

Examples:

import { CategoryBar, Card, Title, Text, Flex } from '@tremor/react';

<Card>
  <Title>Browser Usage</Title>
  <CategoryBar values={[45, 30, 15, 10]} colors={['blue', 'cyan', 'orange', 'violet']} />
  <Flex justifyContent="between" className="mt-2">
    <Text>Chrome: 45%</Text>
    <Text>Safari: 30%</Text>
    <Text>Firefox: 15%</Text>
    <Text>Other: 10%</Text>
  </Flex>
</Card>

// With marker (target line)
<CategoryBar
  values={[65, 20, 15]}
  colors={['blue', 'violet', 'gray']}
  markerValue={70}
/>

DeltaBar

Visualize positive/negative change from baseline.

interface DeltaBarProps {
  value: number; // -100 to 100
  isIncreasePositive?: boolean; // default: true
  tooltip?: string;
  showAnimation?: boolean;
}

Examples:

import { DeltaBar, Card, Text, Flex } from '@tremor/react';

// Positive change
<div>
  <Flex justifyContent="between">
    <Text>Revenue vs. Target</Text>
    <Text>+15%</Text>
  </Flex>
  <DeltaBar value={15} />
</div>

// Negative change (decrease is good, e.g., costs)
<DeltaBar value={-12} isIncreasePositive={false} />

MarkerBar

Bar with marker for targets/thresholds.

interface MarkerBarProps {
  value: number;
  minValue?: number; // default: 0
  maxValue?: number; // default: 100
  markerTooltip?: string;
  rangeTooltip?: string;
  showAnimation?: boolean;
  color?: Color;
}

Examples:

import { MarkerBar, Card, Text, Flex } from '@tremor/react';

<Card>
  <Flex justifyContent="between">
    <Text>Revenue Progress</Text>
    <Text>$75K / $100K</Text>
  </Flex>
  <MarkerBar
    value={75}
    markerTooltip="Target: $100K"
    rangeTooltip="Current: $75K"
    color="blue"
  />
</Card>

Tracker

Timeline visualization with colored status blocks.

interface TrackerProps {
  data: Array<{
    key?: string | number;
    color?: Color | string;
    tooltip?: string;
  }>;
}

Examples:

import { Tracker, Card, Title } from '@tremor/react';

// Deployment status
const deploymentData = [
  { color: 'emerald', tooltip: 'Jan: Successful' },
  { color: 'emerald', tooltip: 'Feb: Successful' },
  { color: 'red', tooltip: 'Mar: Failed' },
  { color: 'emerald', tooltip: 'Apr: Successful' },
];

<Card>
  <Title>Deployment History</Title>
  <Tracker data={deploymentData} className="mt-4" />
</Card>

// 30-day uptime
const uptimeData = Array.from({ length: 30 }, (_, i) => ({
  color: Math.random() > 0.1 ? 'emerald' : 'red',
  tooltip: `Day ${i + 1}: ${Math.random() > 0.1 ? 'Online' : 'Offline'}`,
}));

<Card>
  <Title>30-Day Uptime</Title>
  <Tracker data={uptimeData} className="mt-4" />
</Card>

Visualization Dashboard Pattern

import {
  Grid,
  Card,
  Title,
  Text,
  Flex,
  BarList,
  ProgressBar,
  CategoryBar,
  Tracker,
} from '@tremor/react';

function VisualizationDashboard() {
  return (
    <Grid numItems={1} numItemsLg={2} className="gap-6">
      {/* Rankings */}
      <Card>
        <Title>Quarterly Sales</Title>
        <BarList
          data={[
            { name: 'Q1', value: 8500 },
            { name: 'Q2', value: 9200 },
            { name: 'Q3', value: 10100 },
          ]}
          valueFormatter={(v) => `$${(v / 1000).toFixed(1)}K`}
        />
      </Card>

      {/* Progress */}
      <Card>
        <Title>Goal Progress</Title>
        <div className="space-y-4">
          <div>
            <Flex justifyContent="between">
              <Text>Annual Target</Text>
              <Text>87%</Text>
            </Flex>
            <ProgressBar value={87} color="blue" />
          </div>
        </div>
      </Card>

      {/* Distribution */}
      <Card>
        <Title>Revenue by Category</Title>
        <CategoryBar
          values={[40, 30, 20, 10]}
          colors={['blue', 'violet', 'cyan', 'gray']}
        />
      </Card>

      {/* Status */}
      <Card>
        <Title>30-Day Uptime</Title>
        <Tracker data={statusData} />
      </Card>
    </Grid>
  );
}

Common Mistakes

❌ Using ProgressBar/ProgressCircle with values outside 0-100 range
❌ CategoryBar values not summing to 100
❌ Not providing name and value for BarList items
❌ Forgetting tooltip for Tracker blocks (improves UX)
❌ Not using valueFormatter for BarList (inconsistent formatting)

tessl/npm-tremor--react

visualization-elements.mddocs/

Visualization Components

Visualization Selection

BarList

ProgressBar

ProgressCircle

CategoryBar

DeltaBar

MarkerBar

Tracker

Visualization Dashboard Pattern

Common Mistakes

See Also

tessl/npm-tremor--react

visualization-elements.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Visualization Components

Visualization Selection

BarList

ProgressBar

ProgressCircle

CategoryBar

DeltaBar

MarkerBar

Tracker

Visualization Dashboard Pattern

Common Mistakes

See Also

visualization-elements.mddocs/