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, 10],
  [20, 24],
  [40, 14],
  [60, 30],
  [80, 18],
  [100, 26],
];

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

export default function PlotCardCompactDemo() {
  return (
    <div className="eleo" style={{ width: 280 }}>
      <PlotCard title="Distortion" meta="%" compact>
        <svg
          viewBox="0 0 100 40"
          width="100%"
          height="100"
          style={{ display: "block" }}
        >
          <path
            d={samplePath()}
            fill="none"
            stroke="var(--field-1)"
            strokeWidth={1.5}
          />
        </svg>
      </PlotCard>
    </div>
  );
}