Matte Metric Display

A dark matte metric card that shows a headline number with an animated sparkline and trend, with segmented buttons to switch the comparison period (7/30/90 days). Ported to React from SL UI Library's vanilla HTML/CSS/JS "data display" component (MIT, credit SLtowl).

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

import MetricDisplay from "@/components/ui/matte-metric-display";

export default function MatteMetricDisplayDemo() {
  return (
    <div
      className="flex min-h-screen w-full items-center justify-center p-5"
      style={{ background: "#efefef" }}
    >
      <MetricDisplay />
    </div>
  );
}