Prompts / Eval

MetricCard

Single eval metric with delta vs baseline and an optional inline sparkline.

Preview

accuracy

0.062

0.842

latency p95

65ms

175ms

cost

0.0016$

0.0124$

Installation

pnpm add nyxis-ui

Usage

import { MetricCard, type EvalMetric } from 'nyxis-ui';

const accuracy: EvalMetric = {
  name: 'accuracy',
  value: 0.842,
  baseline: 0.78,
  goodDirection: 'up',
  sparkline: [0.62, 0.66, 0.69, 0.71, 0.74, 0.78, 0.81, 0.84],
  precision: 3,
};

<MetricCard metric={accuracy} />;

Anatomy

Header: metric name + delta pill (↑ 0.062 vs baseline).
Big value with optional unit suffix.
SVG sparkline (when sparkline is supplied).
goodDirection controls the delta tone: up means “higher is better” (default), down means “lower is better” — affects whether a positive delta renders as success or destructive.