Plot Card

Cards

About

A card frame for a data plot or chart with a title, metadata, color-key, header actions, loading/empty/error/stale states, and an optional footer for a legend. Ported to React from the Svelte PlotCard component in ELE Optics' eleo-ui.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Plot Card to your project and fits it to your theme.

Code

How Plot Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import PlotCard from "@/components/ui/plot-card";

const points: [number, number][] = [
  [0, 42],
  [10, 38],
  [20, 30],
  [30, 22],
  [40, 18],
  [50, 16],
  [60, 18],
  [70, 24],
  [80, 32],
  [90, 40],
  [100, 46],
];

function samplePath() {
  return points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x},${y}`).join(" ");
}

export default function PlotCardDemo() {
  return (
    <div className="eleo" style={{ width: 360 }}>
      <PlotCard title="MTF" meta="0.0°, 50 lp/mm" colorKey="Color: field">
        <svg
          viewBox="0 0 100 60"
          width="100%"
          height="160"
          style={{ display: "block" }}
        >
          <path
            d={samplePath()}
            fill="none"
            stroke="var(--field-1)"
            strokeWidth={1.5}
          />
        </svg>
        <div className="eleo-legend" style={{ marginTop: 8 }}>
          <span
            className="eleo-key"
            style={{ "--c": "var(--field-1)" } as React.CSSProperties}
          >
            on axis
          </span>
        </div>
      </PlotCard>
    </div>
  );
}