Monitor deployed ML models in real-time with performance metrics, version tracking, and deployment status. Interactive dashboard component for machine learning operations.

Active Model Card

The Active Model Card displays information about the currently deployed machine learning model, including version, performance metrics, and deployment status.

Preview

Installation

npx shadcn@latest add https://vectormotion.vercel.app/registry/active-model-card.json

Active Model Card

'use client'
import React from 'react';
import { Box, Zap, Activity, Cpu, Server } from 'lucide-react';
import { motion } from 'motion/react';
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
import { ResponsiveContainer, AreaChart, Area, Tooltip, XAxis, YAxis, CartesianGrid } from 'recharts';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

interface MetricData {
  time: string;
  rpm: number;
  lat: number;
  [key: string]: any;
}

interface MetricCardProps {
  label: string;
  value: string;
  unit?: string;
  trend?: string;
  trendLabel?: string;
  trendColor?: string;
  icon: React.ComponentType<any>;
  progress?: number;
}

interface ActiveModelCardProps {
  className?: string;
  title?: string;
  version?: string;
  status?: string;
  metrics?: MetricCardProps[];
  chartData?: MetricData[];
  serverInfo?: string;
}

const DEFAULT_DATA: MetricData[] = [
  { time: '10:00', rpm: 120, lat: 45 },
  { time: '10:05', rpm: 135, lat: 48 },
  { time: '10:10', rpm: 125, lat: 42 },
  { time: '10:15', rpm: 155, lat: 55 },
  { time: '10:20', rpm: 180, lat: 60 }, // Spike
  { time: '10:25', rpm: 160, lat: 50 },
  { time: '10:30', rpm: 150, lat: 48 },
];

const DEFAULT_METRICS: MetricCardProps[] = [
  { label: 'RPM', value: '158', unit: '', trend: '+12%', trendLabel: 'vs avg', trendColor: 'text-emerald-500', icon: Zap },
  { label: 'Latency', value: '48', unit: 'ms', trend: 'Stable', trendLabel: '', trendColor: 'text-emerald-500', icon: Activity },
  { label: 'Load', value: '42', unit: '%', progress: 42, icon: Cpu },
];

const DEFAULT_TITLE = "ResNet-50 Classifier";
const DEFAULT_VERSION = "v4.2.0-stable";
const DEFAULT_STATUS = "Live";
const DEFAULT_SERVER_INFO = "Running on g4dn.xlarge (us-east-1a)";

export const ActiveModelCard: React.FC<ActiveModelCardProps> = ({
  className = "",
  title = DEFAULT_TITLE,
  version = DEFAULT_VERSION,
  status = DEFAULT_STATUS,
  metrics = DEFAULT_METRICS,
  chartData = DEFAULT_DATA,
  serverInfo = DEFAULT_SERVER_INFO,
}) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: 0.3 }}
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-md flex flex-col h-full",
        className
      )}
    >
      <div className="p-5 flex flex-col h-full relative z-10">
        {/* Header Section */}
        <div className="flex items-start justify-between mb-4">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-100 dark:border-emerald-800">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-wide">{status}</span>
              </div>
              <span className="text-[10px] font-mono text-muted-foreground">{version}</span>
            </div>
            <h3 className="font-bold text-lg text-foreground leading-tight">
              {title}
            </h3>
          </div>
          <div className="rounded-lg border-2 border-purple-100 dark:border-purple-800 p-2 text-purple-500 dark:text-purple-400 shadow-sm">
            <Box className="h-5 w-5" />
          </div>
        </div>

        {/* Key Metrics Grid */}
        <div className="grid grid-cols-3 gap-2 mb-4">
          {metrics.map((metric, idx) => (
            <div key={idx} className="p-2 rounded-lg bg-muted border border-border">
              <div className="flex items-center gap-1.5 text-muted-foreground mb-1">
                <metric.icon className="w-3 h-3" />
                <span className="text-[10px] uppercase font-bold">{metric.label}</span>
              </div>
              <div className="text-lg font-bold text-foreground">{metric.value}<span className="text-xs font-normal text-muted-foreground ml-0.5">{metric.unit}</span></div>
              {metric.progress !== undefined ? (
                <div className="w-full bg-zinc-200 dark:bg-zinc-700 h-1 rounded-full mt-1.5 overflow-hidden">
                  <div className="bg-purple-500 h-full rounded-full" style={{ width: `${metric.progress}%` }} />
                </div>
              ) : (
                <div className={`text-[10px] ${metric.trendColor || 'text-emerald-500'} flex items-center gap-0.5 font-medium`}>
                  {metric.trend} <span className="text-muted-foreground">{metric.trendLabel}</span>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Main Chart Section */}
        <div className="flex-1 w-full min-h-[100px] relative border-t border-border pt-4">
          <div className="absolute top-4 right-0 flex items-center gap-2">
            <div className="flex items-center gap-1">
              <div className="w-2 h-2 rounded-full bg-purple-500" />
              <span className="text-[10px] text-muted-foreground">Traffic</span>
            </div>
          </div>
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id="colorRpm" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e4e4e7" strokeOpacity={0.4} />
              <Tooltip
                content={({ active, payload }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 p-2 shadow-sm text-xs">
                        <span className="font-bold text-purple-500">
                          {payload[0].payload.time}:
                        </span> {payload[0].value} Req
                      </div>
                    );
                  }
                  return null;
                }}
              />
              <Area
                type="monotone"
                dataKey="rpm"
                stroke="#a855f7"
                strokeWidth={2}
                fill="url(#colorRpm)"
                animationDuration={1500}
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        {/* Footer Info */}
        <div className="mt-3 flex items-center gap-2 text-[10px] text-muted-foreground bg-muted/30 p-2 rounded border border-dashed border-border">
          <Server className="w-3 h-3" />
          <span>{serverInfo}</span>
        </div>

        <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">
          <Zap className="w-40 h-40 text-purple-500" />
        </div>
      </div>
    </motion.div>
  );
};

'use client'import React from 'react';import { Box, Zap, Activity, Cpu, Server } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, AreaChart, Area, Tooltip, XAxis, YAxis, CartesianGrid } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface MetricData {  time: string;  rpm: number;  lat: number;  [key: string]: any;}interface MetricCardProps {  label: string;  value: string;  unit?: string;  trend?: string;  trendLabel?: string;  trendColor?: string;  icon: React.ComponentType<any>;  progress?: number;}interface ActiveModelCardProps {  className?: string;  title?: string;  version?: string;  status?: string;  metrics?: MetricCardProps[];  chartData?: MetricData[];  serverInfo?: string;}const DEFAULT_DATA: MetricData[] = [  { time: '10:00', rpm: 120, lat: 45 },  { time: '10:05', rpm: 135, lat: 48 },  { time: '10:10', rpm: 125, lat: 42 },  { time: '10:15', rpm: 155, lat: 55 },  { time: '10:20', rpm: 180, lat: 60 }, // Spike  { time: '10:25', rpm: 160, lat: 50 },  { time: '10:30', rpm: 150, lat: 48 },];const DEFAULT_METRICS: MetricCardProps[] = [  { label: 'RPM', value: '158', unit: '', trend: '+12%', trendLabel: 'vs avg', trendColor: 'text-emerald-500', icon: Zap },  { label: 'Latency', value: '48', unit: 'ms', trend: 'Stable', trendLabel: '', trendColor: 'text-emerald-500', icon: Activity },  { label: 'Load', value: '42', unit: '%', progress: 42, icon: Cpu },];const DEFAULT_TITLE = "ResNet-50 Classifier";const DEFAULT_VERSION = "v4.2.0-stable";const DEFAULT_STATUS = "Live";const DEFAULT_SERVER_INFO = "Running on g4dn.xlarge (us-east-1a)";export const ActiveModelCard: React.FC<ActiveModelCardProps> = ({  className = "",  title = DEFAULT_TITLE,  version = DEFAULT_VERSION,  status = DEFAULT_STATUS,  metrics = DEFAULT_METRICS,  chartData = DEFAULT_DATA,  serverInfo = DEFAULT_SERVER_INFO,}) => {  return (    <motion.div      initial={{ opacity: 0, y: 20 }}      animate={{ opacity: 1, y: 0 }}      transition={{ duration: 0.5, delay: 0.3 }}      className={cn(        "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-md flex flex-col h-full",        className      )}    >      <div className="p-5 flex flex-col h-full relative z-10">        {/* Header Section */}        <div className="flex items-start justify-between mb-4">          <div>            <div className="flex items-center gap-2 mb-1">              <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-100 dark:border-emerald-800">                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />                <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-wide">{status}</span>              </div>              <span className="text-[10px] font-mono text-muted-foreground">{version}</span>            </div>            <h3 className="font-bold text-lg text-foreground leading-tight">              {title}            </h3>          </div>          <div className="rounded-lg border-2 border-purple-100 dark:border-purple-800 p-2 text-purple-500 dark:text-purple-400 shadow-sm">            <Box className="h-5 w-5" />          </div>        </div>        {/* Key Metrics Grid */}        <div className="grid grid-cols-3 gap-2 mb-4">          {metrics.map((metric, idx) => (            <div key={idx} className="p-2 rounded-lg bg-muted border border-border">              <div className="flex items-center gap-1.5 text-muted-foreground mb-1">                <metric.icon className="w-3 h-3" />                <span className="text-[10px] uppercase font-bold">{metric.label}</span>              </div>              <div className="text-lg font-bold text-foreground">{metric.value}<span className="text-xs font-normal text-muted-foreground ml-0.5">{metric.unit}</span></div>              {metric.progress !== undefined ? (                <div className="w-full bg-zinc-200 dark:bg-zinc-700 h-1 rounded-full mt-1.5 overflow-hidden">                  <div className="bg-purple-500 h-full rounded-full" style={{ width: `${metric.progress}%` }} />                </div>              ) : (                <div className={`text-[10px] ${metric.trendColor || 'text-emerald-500'} flex items-center gap-0.5 font-medium`}>                  {metric.trend} <span className="text-muted-foreground">{metric.trendLabel}</span>                </div>              )}            </div>          ))}        </div>        {/* Main Chart Section */}        <div className="flex-1 w-full min-h-[100px] relative border-t border-border pt-4">          <div className="absolute top-4 right-0 flex items-center gap-2">            <div className="flex items-center gap-1">              <div className="w-2 h-2 rounded-full bg-purple-500" />              <span className="text-[10px] text-muted-foreground">Traffic</span>            </div>          </div>          <ResponsiveContainer width="100%" height="100%">            <AreaChart data={chartData}>              <defs>                <linearGradient id="colorRpm" x1="0" y1="0" x2="0" y2="1">                  <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />                  <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />                </linearGradient>              </defs>              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e4e4e7" strokeOpacity={0.4} />              <Tooltip                content={({ active, payload }) => {                  if (active && payload && payload.length) {                    return (                      <div className="rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 p-2 shadow-sm text-xs">                        <span className="font-bold text-purple-500">                          {payload[0].payload.time}:                        </span> {payload[0].value} Req                      </div>                    );                  }                  return null;                }}              />              <Area                type="monotone"                dataKey="rpm"                stroke="#a855f7"                strokeWidth={2}                fill="url(#colorRpm)"                animationDuration={1500}              />            </AreaChart>          </ResponsiveContainer>        </div>        {/* Footer Info */}        <div className="mt-3 flex items-center gap-2 text-[10px] text-muted-foreground bg-muted/30 p-2 rounded border border-dashed border-border">          <Server className="w-3 h-3" />          <span>{serverInfo}</span>        </div>        <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">          <Zap className="w-40 h-40 text-purple-500" />        </div>      </div>    </motion.div>  );};

Props

Prop

Type

Usage

This component is a demo card displaying active model information with animated visualizations and dark mode support.

Active Model Card - ML Model Monitoring Dashboard

Active Model Card

Preview

Installation

Props

Usage

On this page