Plot Card

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.

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

export default function PlotCardLoadingDemo() {
  return (
    <div className="eleo" style={{ width: 360 }}>
      <PlotCard
        title="Spot diagram"
        meta="0.0°"
        state="loading"
        message="Tracing rays…"
      />
    </div>
  );
}