# Getting Started



# Getting Started with Vector Motion, Next.js, Tailwind CSS & CLI

## 1. Install Next.js

npx create-next-app\@latest my-app
cd my-app

## 2. Install Tailwind CSS

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Add Tailwind to your CSS file (e.g., `app/globals.css`):

```bash
@import "tailwindcss";
```

## 3. Add vectormotion UI Utilities & Use the CLIa

### Initialize Shadcn CLI

```bash
npx shadcn@latest init
```

Follow the prompts for style, color, and CSS variable settings.

### Add vectormotion blocks

```bash
npx shadcn@latest add @vectormotion/3d-marquee
```

### Setup Registry in `components.json`

```js
{
  "registries": {
    "@vectormotion": "https://vectormotion.dev/registry/{name}.json"
  }
}
```

### CLI Commands for vectormotion

* View registry items:

```bash
npx shadcn@latest view @vectormotion
```

* Search for components:

```bash
npx shadcn@latest search @vectormotion -q "card"
```

* List all registry components:
  npx shadcn\@latest list @vectormotion

***

**You’re all set! Start building with vectormotion in your Next.js + Tailwind CSS project.**

***

<Cards>
  <Card title="docs" href="/docs" />

  <Card title="finance-block1" href="/docs/finance/finance-ebitda-card" />
</Cards>


# Vector Motion — Animated UI Blocks for Dashboards



# Vector Motion — Introduction

**Vector Motion** delivers a comprehensive suite of 100+ animated, interactive blocks and vector components designed for modern React web applications.

* **Production-Ready & Responsive**: Optimized for developer experience; all components are accessible and fast.
* **Specialized Library**: Ideal for dashboards in Finance, Medical, Education, and AI.
* **Modern Stack**: Built on React 19 + Tailwind CSS v4 for zero-runtime overhead.
* **Native Dark Mode & Theming**: Easily switch themes and manage colors via CSS variables.
* **TypeScript Support**: Full type-safety and type definitions.
* **Mobile-First & Responsive**: Works seamlessly on phones, tablets, desktops.
* **Animated Data Visuals**: Uses Recharts for rich, interactive charts and visualizations.
* **Medical Focus**: Includes HIPAA-compliant visuals, vital signs, schedule and resource tracking for healthcare apps and EMRs.

> Developers ship dashboards faster using Vector Motion—no need to reinvent the wheel. Thousands are already modernizing their financial, medical, and AI dashboards with this toolkit.


# Active Model Card - ML Model Monitoring Dashboard



# Active Model Card

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

## Preview

<VectorMotionBlock group="ai-ml" bid="ActiveModelCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/active-model-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/active-model-card.tsx" title="Active Model Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  label: {
    description: 'The label for the component.',
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'string' 
  },
  unit: {
    description: 'The unit of measurement.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  trendLabel: {
    description: 'Label for trend information.',
    type: 'string' 
  },
  trendColor: {
    description: 'The color indicating the trend direction.',
    type: 'string' 
  },
  icon: {
    description: 'Icon element to display.',
    type: 'React.ComponentType<any>' 
  },
  progress: {
    description: 'The progress percentage value.',
    type: 'number' 
  }
}}
/>

## Usage

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


# Algorithm Status Card - ML Algorithm Tracking



# Algorithm Status Card

The Algorithm Status Card displays the currently selected machine learning algorithm, candidate algorithms, and version information for model selection tracking.

## Preview

<VectorMotionBlock group="ai-ml" bid="AlgorithmStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/algorithm-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/algorithm-status-card.tsx" title="Algorithm Status Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  algorithms: {
    type: 'AlgorithmItem[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "score": {
                "type": "string",
                "optional": false
          },
          "isActive": {
                "type": "boolean",
                "optional": false
          },
          "id": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card showing:

* Active algorithm (XGBoost Classifier)
* Candidate algorithms (Random Forest)
* Version information and performance indicators
* Status badges for active vs candidate models

The component uses Framer Motion for smooth animations and follows a consistent design system with dark mode support.


# API Volume Card - Request Monitoring Dashboard



# API Volume Card

The API Volume Card tracks API request volume for machine learning inference endpoints, helping teams monitor usage patterns and capacity.

## Preview

<VectorMotionBlock group="ai-ml" bid="APIVolumeCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/api-volume-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/api-volume-card.tsx" title="API Volume Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalVolume: {
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  trendIcon: {
    type: 'React.ElementType' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ApiVolumeData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "req": {
                "type": "number",
                "optional": false
          }
    }
  },
  peakVolume: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying API volume metrics with animated visualizations and dark mode support.


# Audit Trail Card - ML Operations Audit Log



# Audit Trail Card

The Audit Trail Card displays a chronological log of machine learning operations, model changes, and system events for compliance and debugging.

## Preview

<VectorMotionBlock group="ai-ml" bid="AuditTrailCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/audit-trail-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/audit-trail-card.tsx" title="Audit Trail Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  eventsCount: {
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  events: {
    type: 'AuditEvent[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "title": {
                "type": "string",
                "optional": false
          },
          "user": {
                "type": "string",
                "optional": false
          },
          "action": {
                "type": "string",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying audit trail entries with animated visualizations and dark mode support.


# Confusion Matrix Card - ML Model Performance



# Confusion Matrix Card

The Confusion Matrix Card displays a confusion matrix visualization showing true positives, false positives, true negatives, and false negatives for classification model evaluation.

## Preview

<VectorMotionBlock group="ai-ml" bid="ConfusionMatrixCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/confusion-matrix-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/confusion-matrix-card.tsx" title="Confusion Matrix Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MatrixData[]' ,
    schema: {
          "x": {
                "type": "number",
                "optional": false
          },
          "y": {
                "type": "number",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "label": {
                "type": "string",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying confusion matrix data with animated visualizations and dark mode support.


# Data Drift Card - ML Data Quality Monitoring



# Data Drift Card

The Data Drift Card tracks statistical drift in input data distributions, helping teams detect when model retraining may be needed due to changing data patterns.

## Preview

<VectorMotionBlock group="ai-ml" bid="DataDriftCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/data-drift-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/data-drift-card.tsx" title="Data Drift Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  featureName: {
    type: 'string' 
  },
  status: {
    description: 'The status indicator for the component.',
    type: 'string' 
  },
  isDetected: {
    type: 'boolean' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DriftData[]' ,
    schema: {
          "x": {
                "type": "number",
                "optional": false
          },
          "baseline": {
                "type": "number",
                "optional": false
          },
          "current": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying data drift metrics with animated visualizations and dark mode support.


# Data Quality Card - Data Validation Dashboard



# Data Quality Card

The Data Quality Card displays data quality metrics including completeness, accuracy, and validity scores to ensure high-quality training and inference data.

## Preview

<VectorMotionBlock group="ai-ml" bid="DataQualityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/data-quality-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/data-quality-card.tsx" title="Data Quality Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  checksPassedCount: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'QualityMetric[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  scanTime: {
    type: 'string' 
  },
  rowCount: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying data quality metrics with animated visualizations and dark mode support.


# Dataset Version Card - Training Data Management



# Dataset Version Card

The Dataset Version Card displays dataset version information, helping teams manage data versioning and track which datasets are used for training and evaluation.

## Preview

<VectorMotionBlock group="ai-ml" bid="DatasetVersionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/dataset-version-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/dataset-version-card.tsx" title="Dataset Version Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  version: {
    type: 'string' 
  },
  commitHash: {
    type: 'string' 
  },
  events: {
    type: 'VersionEvent[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "title": {
                "type": "string",
                "optional": false
          },
          "description": {
                "type": "React.ReactNode",
                "optional": false
          },
          "meta": {
                "type": "string",
                "optional": false
          },
          "isActive": {
                "type": "boolean",
                "optional": false
          },
          "iconColorClass": {
                "type": "string",
                "optional": false
          },
          "borderColorClass": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

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


# Deployment Status Card - ML Model Deployment



# Deployment Status Card

The Deployment Status Card displays the current deployment status of machine learning models across different environments (dev, staging, production).

## Preview

<VectorMotionBlock group="ai-ml" bid="DeploymentStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/deployment-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/deployment-status-card.tsx" title="Deployment Status Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  healthStatus: {
    type: 'string' 
  },
  deploymentStatus: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DeploymentData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          },
          "version": {
                "type": "string",
                "optional": false
          }
    }
  },
  errorRate: {
    type: 'string' 
  },
  rollbackStatus: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying deployment status with animated visualizations and dark mode support.


# Error Log Card - ML System Error Monitoring



# Error Log Card

The Error Log Card displays recent errors and exceptions from machine learning systems, helping teams quickly identify and debug issues.

## Preview

<VectorMotionBlock group="ai-ml" bid="ErrorLogCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/error-log-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/error-log-card.tsx" title="Error Log Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalExceptions: {
    type: 'number' 
  },
  timeRange: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ErrorData[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying error logs with animated visualizations and dark mode support.


# Experiment Tracker Card - ML Experiment Management



# Experiment Tracker Card

The Experiment Tracker Card displays machine learning experiment runs, parameters, and results, helping teams compare different model configurations.

## Preview

<VectorMotionBlock group="ai-ml" bid="ExperimentTrackerCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/experiment-tracker-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/experiment-tracker-card.tsx" title="Experiment Tracker Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  activeExperiments: {
    type: 'number' 
  },
  annotation: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ExperimentData[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "lift": {
                "type": "number",
                "optional": false
          },
          "confidence": {
                "type": "number",
                "optional": false
          },
          "name": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying experiment tracking data with animated visualizations and dark mode support.


# Feature Importance Card - ML Feature Analysis



# Feature Importance Card

The Feature Importance Card displays which features have the most impact on model predictions, helping teams understand model behavior and feature engineering priorities.

## Preview

<VectorMotionBlock group="ai-ml" bid="FeatureImportanceCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/feature-importance-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/feature-importance-card.tsx" title="Feature Importance Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'FeatureData[]' ,
    schema: {
          "feature": {
                "type": "string",
                "optional": false
          },
          "importance": {
                "type": "number",
                "optional": false
          }
    }
  },
  barColor: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying feature importance rankings with animated visualizations and dark mode support.


# Ground Truth Card - Model Training Data



# Ground Truth Card

The Ground Truth Card displays ground truth labels and validation data used for model evaluation and performance measurement.

## Preview

<VectorMotionBlock group="ai-ml" bid="GroundTruthCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/ground-truth-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/ground-truth-card.tsx" title="Ground Truth Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  labeledPercentage: {
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'GroundTruthData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  footerText: {
    type: 'string' 
  }
}}
/>

## Usage

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


# Hardware Utilization Card - Resource Monitoring



# Hardware Utilization Card

The Hardware Utilization Card displays GPU, CPU, and memory usage for machine learning training and inference workloads.

## Preview

<VectorMotionBlock group="ai-ml" bid="HardwareUtilCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/hardware-util-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/hardware-util-card.tsx" title="Hardware Utilization Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  gpuName: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'HardwareData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  gpuUsagePercentage: {
    type: 'string' 
  },
  vramUsage: {
    type: 'string' 
  },
  totalVram: {
    type: 'string' 
  },
  computeUsagePercentage: {
    type: 'number' 
  }
}}
/>

## Usage

This component is a demo card displaying hardware utilization metrics with animated visualizations and dark mode support.


# Hyperparameter Card - Model Configuration



# Hyperparameter Card

The Hyperparameter Card displays current hyperparameter settings and allows comparison of different configurations for model tuning.

## Preview

<VectorMotionBlock group="ai-ml" bid="HyperparameterCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/hyperparameter-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/hyperparameter-card.tsx" title="Hyperparameter Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  comparisonLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'HyperparameterData[]' ,
    schema: {
          "param": {
                "type": "string",
                "optional": false
          },
          "current": {
                "type": "number",
                "optional": false
          },
          "best": {
                "type": "number",
                "optional": false
          },
          "fullMark": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying hyperparameter settings with animated visualizations and dark mode support.


# Inference Feed Card - Real-time Predictions



# Inference Feed Card

The Inference Feed Card displays a live feed of inference requests and predictions, helping teams monitor model usage in real-time.

## Preview

<VectorMotionBlock group="ai-ml" bid="InferenceFeedCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/inference-feed-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/inference-feed-card.tsx" title="Inference Feed Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  status: {
    description: 'The status indicator for the component.',
    type: 'string' 
  },
  isConnected: {
    type: 'boolean' 
  },
  logs: {
    type: 'LogEntry[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "pred": {
                "type": "string",
                "optional": false
          },
          "conf": {
                "type": "number",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "correct": {
                "type": "boolean",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying inference feed data with animated visualizations and dark mode support.


# Inference Latency Card - Model Performance



# Inference Latency Card

The Inference Latency Card tracks model inference response times, helping teams ensure models meet performance SLAs.

## Preview

<VectorMotionBlock group="ai-ml" bid="InferenceLatencyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/inference-latency-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/inference-latency-card.tsx" title="Inference Latency Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentLatency: {
    type: 'string' 
  },
  latencyChange: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'LatencyData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "ms": {
                "type": "number",
                "optional": false
          }
    }
  },
  sloThreshold: {
    type: 'number' 
  }
}}
/>

## Usage

This component is a demo card displaying inference latency metrics with animated visualizations and dark mode support.


# Model Accuracy Card - ML Performance Metrics



# Model Accuracy Card

The Model Accuracy Card displays model accuracy scores and trends over time, helping teams monitor model performance.

## Preview

<VectorMotionBlock group="ai-ml" bid="ModelAccuracyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/model-accuracy-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/model-accuracy-card.tsx" title="Model Accuracy Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'AccuracyData[]' ,
    schema: {
          "metric": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fullMark": {
                "type": "number",
                "optional": false
          }
    }
  },
  accuracyValue: {
    type: 'string' 
  },
  f1ScoreValue: {
    type: 'string' 
  }
}}
/>

## Usage

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


# Prediction Distribution Card - Model Output Analysis



# Prediction Distribution Card

The Prediction Distribution Card displays the distribution of model predictions, helping teams identify prediction patterns and potential biases.

## Preview

<VectorMotionBlock group="ai-ml" bid="PredictionDistCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/prediction-dist-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/prediction-dist-card.tsx" title="Prediction Distribution Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  skewLabel: {
    type: 'string' 
  },
  sampleCount: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DistributionData[]' ,
    schema: {
          "range": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  },
  meanValue: {
    type: 'string' 
  },
  medianValue: {
    type: 'string' 
  },
  lowConfValue: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying prediction distribution data with animated visualizations and dark mode support.


# Retraining Schedule Card - Model Maintenance



# Retraining Schedule Card

The Retraining Schedule Card displays upcoming and past model retraining schedules, helping teams maintain model freshness and performance.

## Preview

<VectorMotionBlock group="ai-ml" bid="RetrainingScheduleCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/retraining-schedule-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/retraining-schedule-card.tsx" title="Retraining Schedule Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ScheduleData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  timeLeft: {
    type: 'string' 
  },
  nextJobSchedule: {
    type: 'string' 
  }
}}
/>

## Usage

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


# Retry Count Card - Request Reliability



# Retry Count Card

The Retry Count Card tracks the number of retry attempts for failed inference requests, helping teams identify reliability issues.

## Preview

<VectorMotionBlock group="ai-ml" bid="RetryCountCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/retry-count-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/retry-count-card.tsx" title="Retry Count Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  retryCount: {
    type: 'number' 
  },
  retryLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RetryData[]' ,
    schema: {
          "hour": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  },
  footerText: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying retry count metrics with animated visualizations and dark mode support.


# ROC-AUC Card - Model Classification Performance



# ROC AUC Card

The ROC AUC Card displays Receiver Operating Characteristic and Area Under Curve metrics, helping teams evaluate binary classification model performance.

## Preview

<VectorMotionBlock group="ai-ml" bid="ROCAUCCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/roc-auc-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/roc-auc-card.tsx" title="ROC AUC Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  aucScore: {
    type: 'number' 
  },
  qualityLabel: {
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RocData[]' ,
    schema: {
          "x": {
                "type": "number",
                "optional": false
          },
          "y": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying ROC AUC metrics with animated visualizations and dark mode support.


# Sensitivity Card - Model Responsiveness



# Sensitivity Card

The Sensitivity Card displays model sensitivity (recall) metrics, showing the model's ability to correctly identify positive cases.

## Preview

<VectorMotionBlock group="ai-ml" bid="SensitivityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/sensitivity-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/sensitivity-card.tsx" title="Sensitivity Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SensitivityData[]' ,
    schema: {
          "param": {
                "type": "string",
                "optional": false
          },
          "sens": {
                "type": "number",
                "optional": false
          },
          "fullMark": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying sensitivity metrics with animated visualizations and dark mode support.


# Training Progress Card - ML Model Training



# Training Progress Card

The Training Progress Card displays real-time training progress including epochs, loss, and estimated time remaining.

## Preview

<VectorMotionBlock group="ai-ml" bid="TrainingProgressCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/training-progress-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/training-progress-card.tsx" title="Training Progress Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  status: {
    description: 'The status indicator for the component.',
    type: 'string' 
  },
  epochLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ProgressData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  progressValue: {
    type: 'string' 
  },
  lossValue: {
    type: 'string' 
  },
  elapsedTime: {
    type: 'string' 
  },
  remainingTime: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying training progress with animated visualizations and dark mode support.


# Validation Score Card - Model Evaluation



# Validation Score Card

The Validation Score Card displays model validation scores across different metrics, helping teams assess model performance on held-out data.

## Preview

<VectorMotionBlock group="ai-ml" bid="ValidationScoreCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/validation-score-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/ai-ml/validation-score-card.tsx" title="Validation Score Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ValidationData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  accuracyValue: {
    type: 'string' 
  },
  precisionValue: {
    type: 'string' 
  },
  recallValue: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying validation scores with animated visualizations and dark mode support.


# Active Users Card - Real-time Traffic Analytics



# Active Users Card

The Active Users Card Track real-time active user activity.

## Preview

<VectorMotionBlock group="e-commerce" bid="ActiveUsersCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/active-users-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/active-users-card.tsx" title="Active Users Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  currentValue: {
    type: 'string' 
  },
  valueDescription: {
    description: 'Description of the primary value.',
    type: 'string' 
  },
  timeData: {
    description: 'Array of time-based data points.',
    type: 'TimeData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "users": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Average Order Value Card - Revenue Metrics



# Average Order Value Card

The Average Order Value Card Monitor average order value trends and weekly comparisons.

## Preview

<VectorMotionBlock group="e-commerce" bid="AverageOrderValueCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/average-order-value-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/average-order-value-card.tsx" title="Average Order Value Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'string' 
  },
  trend: {
    type: 'Trend' 
  }
}}
/>


# Backorder Status Card - Inventory Management



# Backorder Status Card

The Backorder Status Card Track backorder status and fulfillment timeline.

## Preview

<VectorMotionBlock group="e-commerce" bid="BackorderStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/backorder-status-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/backorder-status-card.tsx" title="Backorder Status Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalBackorders: {
    description: 'The total number of backorder items.',
    type: 'number' 
  },
  items: {
    type: 'BackorderItem[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "quantity": {
                "type": "number",
                "optional": false
          },
          "eta": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Bounce Rate Card - Website Analytics



# Bounce Rate Card

The Bounce Rate Card Track page engagement and bounce rate metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="BounceRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/bounce-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/bounce-rate-card.tsx" title="Bounce Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  rate: {
    description: 'The rate or percentage value.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Carrier Performance Card - Shipping Analytics



# Carrier Performance Card

The Carrier Performance Card Analyze shipping carrier performance and reliability.

## Preview

<VectorMotionBlock group="e-commerce" bid="CarrierPerformanceCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/carrier-performance-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/carrier-performance-card.tsx" title="Carrier Performance Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  carriers: {
    description: 'Array of carrier information.',
    type: 'Carrier[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "rating": {
                "type": "number",
                "optional": false
          },
          "avgTime": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Cart Abandonment Card - Conversion Analysis



# Cart Abandonment Card

The Cart Abandonment Card Analyze abandoned cart rates and recovery opportunities.

## Preview

<VectorMotionBlock group="e-commerce" bid="CartAbandonmentCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/cart-abandonment-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/cart-abandonment-card.tsx" title="Cart Abandonment Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  rate: {
    description: 'The rate or percentage value.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Checkout Abandonment Card - Sales Funnel



# Checkout Abandonment Card

The Checkout Abandonment Card Monitor checkout drop-off and abandonment rates.

## Preview

<VectorMotionBlock group="e-commerce" bid="CheckoutAbandonmentCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/checkout-abandonment-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/checkout-abandonment-card.tsx" title="Checkout Abandonment Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  rate: {
    description: 'The rate or percentage value.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Conversion Rate Card - Sales Performance



# Conversion Rate Card

The Conversion Rate Card Monitor conversion funnel and rate optimization.

## Preview

<VectorMotionBlock group="e-commerce" bid="ConversionRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/conversion-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/conversion-rate-card.tsx" title="Conversion Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  rate: {
    description: 'The rate or percentage value.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Customer Acquisition Card - Growth Metrics



# Customer Acquisition Card

The Customer Acquisition Card Monitor customer acquisition cost and metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="CustomerAcquisitionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/customer-acquisition-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/customer-acquisition-card.tsx" title="Customer Acquisition Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  cost: {
    description: 'The cost value.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Customer Journey Card - User Experience



# Customer Journey Card

The Customer Journey Card Visualize path to purchase and customer journey.

## Preview

<VectorMotionBlock group="e-commerce" bid="CustomerJourneyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/customer-journey-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/customer-journey-card.tsx" title="Customer Journey Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  steps: {
    type: 'Step[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "icon": {
                "type": "React.ElementType",
                "optional": false
          },
          "status": {
                "type": "\"completed\" | \"current\" | \"next\"",
                "optional": false
          }
    }
  }
}}
/>


# Customer Lifetime Value Card - Revenue Analytics



# Customer Lifetime Value Card

The Customer Lifetime Value Card Analyze customer lifetime value and revenue potential.

## Preview

<VectorMotionBlock group="e-commerce" bid="CustomerLifetimeValueCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/customer-lifetime-value-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/customer-lifetime-value-card.tsx" title="Customer Lifetime Value Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'string' 
  },
  change: {
    type: 'number' 
  }
}}
/>


# Customer Retention Card - Loyalty Metrics



# Customer Retention Card

The Customer Retention Card Monitor customer retention rates and loyalty.

## Preview

<VectorMotionBlock group="e-commerce" bid="CustomerRetentionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/customer-retention-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/customer-retention-card.tsx" title="Customer Retention Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  retentionRate: {
    type: 'string' 
  },
  retentionRateChange: {
    description: 'The change in retention rate.',
    type: 'number' 
  },
  cohorts: {
    description: 'Array of cohort data.',
    type: 'Cohort[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "retention": {
                "type": "number",
                "optional": false
          },
          "customers": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Customer Segments Card - Audience Analysis



# Customer Segments Card

The Customer Segments Card Analyze customer segmentation and behavior patterns.

## Preview

<VectorMotionBlock group="e-commerce" bid="CustomerSegmentsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/customer-segments-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/customer-segments-card.tsx" title="Customer Segments Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  segments: {
    description: 'Array of segment data.',
    type: 'Segment[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Daily Sales Card - Revenue Dashboard



# Daily Sales Card

The Daily Sales Card Track real-time daily sales with hourly trends and performance metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="DailySalesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/daily-sales-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/daily-sales-card.tsx" title="Daily Sales Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  sales: {
    description: 'The sales amount.',
    type: 'string' 
  },
  salesChange: {
    description: 'The change in sales amount.',
    type: 'number' 
  },
  salesData: {
    description: 'Array of sales data points.',
    type: 'SalesData[]' ,
    schema: {
          "hour": {
                "type": "string",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Delivery Time Card - Logistics Analytics



# Delivery Time Card

The Delivery Time Card Analyze shipping time and delivery performance.

## Preview

<VectorMotionBlock group="e-commerce" bid="DeliveryTimeCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/delivery-time-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/delivery-time-card.tsx" title="Delivery Time Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  averageDeliveryTime: {
    description: 'The average delivery time in days.',
    type: 'string' 
  },
  zones: {
    description: 'Array of delivery zone data.',
    type: 'Zone[]' ,
    schema: {
          "zone": {
                "type": "string",
                "optional": false
          },
          "avgTime": {
                "type": "string",
                "optional": false
          },
          "onTime": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Discount Impact Card - Promotional Analysis



# Discount Impact Card

The Discount Impact Card Analyze discount effectiveness and margin impact.

## Preview

<VectorMotionBlock group="e-commerce" bid="DiscountImpactCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/discount-impact-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/discount-impact-card.tsx" title="Discount Impact Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalDiscountRevenue: {
    description: 'The total revenue from discounts.',
    type: 'string' 
  },
  discounts: {
    description: 'Array of discount data.',
    type: 'Discount[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "orders": {
                "type": "number",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "margin": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Email Campaign Card - Marketing Analytics



# Email Campaign Card

The Email Campaign Card Track email marketing performance and engagement.

## Preview

<VectorMotionBlock group="e-commerce" bid="EmailCampaignCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/email-campaign-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/email-campaign-card.tsx" title="Email Campaign Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  openRate: {
    description: 'The email open rate percentage.',
    type: 'string' 
  },
  clickRate: {
    description: 'The click-through rate percentage.',
    type: 'string' 
  },
  totalSent: {
    description: 'The total emails sent.',
    type: 'string' 
  },
  campaigns: {
    description: 'Array of campaign data.',
    type: 'Campaign[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "sent": {
                "type": "number",
                "optional": false
          },
          "opened": {
                "type": "number",
                "optional": false
          },
          "clicked": {
                "type": "number",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Fulfillment Speed Card - Order Processing



# Fulfillment Speed Card

The Fulfillment Speed Card Track order processing time and fulfillment metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="FulfillmentSpeedCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/fulfillment-speed-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/fulfillment-speed-card.tsx" title="Fulfillment Speed Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  averageTime: {
    description: 'The average time duration.',
    type: 'string' 
  },
  within24Hours: {
    description: 'The count of items completed within 24 hours.',
    type: 'string' 
  },
  metrics: {
    type: 'Metric[]' ,
    schema: {
          "metric": {
                "type": "string",
                "optional": false
          },
          "orders": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Inventory Turnover Card - Stock Management



# Inventory Turnover Card

The Inventory Turnover Card Monitor stock rotation and turnover metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="EcommerceInventoryTurnoverCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/inventory-turnover-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/inventory-turnover-card.tsx" title="Inventory Turnover Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  averageTurnover: {
    description: 'The average turnover rate.',
    type: 'string' 
  },
  turnoverChange: {
    description: 'The change in turnover rate.',
    type: 'number' 
  },
  categories: {
    description: 'Array of category data.',
    type: 'Category[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "turnover": {
                "type": "number",
                "optional": false
          },
          "target": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Inventory Value Card - Stock Valuation



# Inventory Value Card

The Inventory Value Card Track total inventory valuation and stock worth.

## Preview

<VectorMotionBlock group="e-commerce" bid="InventoryValueCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/inventory-value-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/inventory-value-card.tsx" title="Inventory Value Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  valueChange: {
    description: 'The change in value amount.',
    type: 'number' 
  },
  breakdown: {
    type: 'BreakdownItem[]' ,
    schema: {
          "category": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Low Stock Alerts Card - Inventory Monitoring



# Low Stock Alerts Card

The Low Stock Alerts Card Display inventory warnings and low stock notifications.

## Preview

<VectorMotionBlock group="e-commerce" bid="LowStockAlertsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/low-stock-alerts-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/low-stock-alerts-card.tsx" title="Low Stock Alerts Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  alerts: {
    description: 'Array of alert items.',
    type: 'Alert[]' ,
    schema: {
          "product": {
                "type": "string",
                "optional": false
          },
          "current": {
                "type": "number",
                "optional": false
          },
          "reorder": {
                "type": "number",
                "optional": false
          },
          "urgency": {
                "type": "\"critical\" | \"warning\" | \"caution\"",
                "optional": false
          }
    }
  }
}}
/>


# Loyalty Program Card - Customer Rewards



# Loyalty Program Card

The Loyalty Program Card Track rewards program participation and redemption.

## Preview

<VectorMotionBlock group="e-commerce" bid="LoyaltyProgramCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/loyalty-program-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/loyalty-program-card.tsx" title="Loyalty Program Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  tiers: {
    description: 'Array of loyalty tier data.',
    type: 'Tier[]' ,
    schema: {
          "tier": {
                "type": "string",
                "optional": false
          },
          "members": {
                "type": "number",
                "optional": false
          },
          "points": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Mobile vs Desktop Card - Device Analytics



# Mobile vs Desktop Card

The Mobile vs Desktop Card Compare device analytics and user behavior.

## Preview

<VectorMotionBlock group="e-commerce" bid="MobileVsDesktopCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/mobile-vs-desktop-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/mobile-vs-desktop-card.tsx" title="Mobile vs Desktop Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  devices: {
    description: 'Array of device type data.',
    type: 'Device[]' ,
    schema: {
          "device": {
                "type": "\"Mobile\" | \"Desktop\" | \"Tablet\"",
                "optional": false
          },
          "sessions": {
                "type": "number",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "conversion": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Order Accuracy Card - Quality Metrics



# Order Accuracy Card

The Order Accuracy Card Track fulfillment accuracy and error rates.

## Preview

<VectorMotionBlock group="e-commerce" bid="OrderAccuracyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/order-accuracy-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/order-accuracy-card.tsx" title="Order Accuracy Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  overallAccuracy: {
    description: 'The overall accuracy percentage.',
    type: 'string' 
  },
  metrics: {
    type: 'Metric[]' ,
    schema: {
          "metric": {
                "type": "string",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Order Processing Card - Fulfillment Status



# Order Processing Card

The Order Processing Card Track order status and processing workflow.

## Preview

<VectorMotionBlock group="e-commerce" bid="OrderProcessingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/order-processing-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/order-processing-card.tsx" title="Order Processing Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  statuses: {
    description: 'Array of status items.',
    type: 'Status[]' ,
    schema: {
          "status": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Order Volume Card - Sales Volume



# Order Volume Card

The Order Volume Card Track order quantity trends and volume patterns.

## Preview

<VectorMotionBlock group="e-commerce" bid="OrderVolumeCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/order-volume-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/order-volume-card.tsx" title="Order Volume Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  orderChange: {
    description: 'The change in order volume.',
    type: 'number' 
  },
  days: {
    description: 'Array of day data points.',
    type: 'Day[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "orders": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Packaging Costs Card - Expense Tracking



# Packaging Costs Card

The Packaging Costs Card Track packaging expenses and cost optimization.

## Preview

<VectorMotionBlock group="e-commerce" bid="PackagingCostsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/packaging-costs-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/packaging-costs-card.tsx" title="Packaging Costs Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  materials: {
    description: 'Array of packaging material data.',
    type: 'Material[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "cost": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "perUnit": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Payment Methods Card - Transaction Analysis



# Payment Methods Card

The Payment Methods Card Monitor payment method distribution and transaction counts.

## Preview

<VectorMotionBlock group="e-commerce" bid="PaymentMethodsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/payment-methods-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/payment-methods-card.tsx" title="Payment Methods Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  methods: {
    description: 'Array of payment method data.',
    type: 'Method[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "transactions": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Peak Hours Card - Traffic Patterns



# Peak Hours Card

The Peak Hours Card Analyze traffic patterns and peak shopping times.

## Preview

<VectorMotionBlock group="e-commerce" bid="PeakHoursCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/peak-hours-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/peak-hours-card.tsx" title="Peak Hours Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  peakTime: {
    description: 'The peak traffic time.',
    type: 'string' 
  },
  totalVisitors: {
    description: 'The total number of visitors.',
    type: 'string' 
  },
  totalOrders: {
    type: 'string' 
  },
  hours: {
    description: 'Array of hourly data.',
    type: 'Hour[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "traffic": {
                "type": "number",
                "optional": false
          },
          "orders": {
                "type": "number",
                "optional": false
          },
          "peak": {
                "type": "boolean",
                "optional": false
          }
    }
  }
}}
/>


# Product Categories Card - Category Performance



# Product Categories Card

The Product Categories Card Monitor category performance and sales distribution.

## Preview

<VectorMotionBlock group="e-commerce" bid="ProductCategoriesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/product-categories-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/product-categories-card.tsx" title="Product Categories Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  categories: {
    description: 'Array of category data.',
    type: 'Category[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "growth": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Product Performance Card - Sales Analytics



# Product Performance Card

The Product Performance Card Track product metrics and performance indicators.

## Preview

<VectorMotionBlock group="e-commerce" bid="ProductPerformanceCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/product-performance-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/product-performance-card.tsx" title="Product Performance Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  metrics: {
    type: 'Metric[]' ,
    schema: {
          "label": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "string",
                "optional": false
          },
          "change": {
                "type": "string",
                "optional": false
          },
          "trend": {
                "type": "\"up\" | \"down\"",
                "optional": false
          }
    }
  }
}}
/>


# Product Views Card - Page Analytics



# Product Views Card

The Product Views Card Track product page views and engagement.

## Preview

<VectorMotionBlock group="e-commerce" bid="ProductViewsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/product-views-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/product-views-card.tsx" title="Product Views Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  products: {
    description: 'Array of product data.',
    type: 'Product[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "views": {
                "type": "number",
                "optional": false
          },
          "addToCart": {
                "type": "number",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Refund Rate Card - Returns Management



# Refund Rate Card

The Refund Rate Card Track refund rates and return analytics.

## Preview

<VectorMotionBlock group="e-commerce" bid="RefundRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/refund-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/refund-rate-card.tsx" title="Refund Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  currentRate: {
    description: 'The current rate value.',
    type: 'number' 
  },
  avgRate: {
    description: 'The average rate value.',
    type: 'number' 
  },
  totalRefunds: {
    description: 'The total refund amount.',
    type: 'string' 
  },
  refundAmount: {
    description: 'The refund amount value.',
    type: 'string' 
  },
  weeklyData: {
    description: 'Array of weekly data points.',
    type: 'WeeklyData[]' ,
    schema: {
          "week": {
                "type": "string",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Return Processing Card - Returns Workflow



# Return Processing Card

The Return Processing Card Monitor returns workflow and processing status.

## Preview

<VectorMotionBlock group="e-commerce" bid="ReturnProcessingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/return-processing-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/return-processing-card.tsx" title="Return Processing Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  activeReturns: {
    description: 'The count of active returns.',
    type: 'number' 
  },
  returnsChange: {
    description: 'The change in return volume.',
    type: 'number' 
  },
  statuses: {
    description: 'Array of status items.',
    type: 'Status[]' ,
    schema: {
          "status": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Revenue Analytics Card - Financial Dashboard



# Revenue Analytics Card

The Revenue Analytics Card Analyze revenue breakdown by sales channel with growth indicators.

## Preview

<VectorMotionBlock group="e-commerce" bid="RevenueAnalyticsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/revenue-analytics-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/revenue-analytics-card.tsx" title="Revenue Analytics Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalRevenue: {
    type: 'string' 
  },
  revenueChange: {
    description: 'The change in revenue amount.',
    type: 'number' 
  },
  channels: {
    description: 'Array of sales channel data.',
    type: 'Channel[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Revenue Forecast Card - Revenue Projections



# Revenue Forecast Card

The Revenue Forecast Card Project future revenue with predictive analytics.

## Preview

<VectorMotionBlock group="e-commerce" bid="RevenueForecastCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/revenue-forecast-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/revenue-forecast-card.tsx" title="Revenue Forecast Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  projectedRevenue: {
    description: 'The projected revenue value.',
    type: 'string' 
  },
  growthRate: {
    description: 'The growth rate percentage.',
    type: 'string' 
  },
  forecast: {
    description: 'Array of forecast data points.',
    type: 'ForecastItem[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "actual": {
                "type": "number | null",
                "optional": false
          },
          "forecast": {
                "type": "number | null",
                "optional": false
          }
    }
  }
}}
/>


# Review Ratings Card - Customer Feedback



# Review Ratings Card

The Review Ratings Card Monitor product reviews and customer ratings.

## Preview

<VectorMotionBlock group="e-commerce" bid="ReviewRatingsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/review-ratings-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/review-ratings-card.tsx" title="Review Ratings Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  avgRating: {
    description: 'The average rating value.',
    type: 'number' 
  },
  ratings: {
    description: 'Array of rating data.',
    type: 'Rating[]' ,
    schema: {
          "stars": {
                "type": "number",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Sales by Region Card - Geographic Analytics



# Sales by Region Card

The Sales by Region Card Track geographic sales distribution and regional growth.

## Preview

<VectorMotionBlock group="e-commerce" bid="SalesByRegionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/sales-by-region-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/sales-by-region-card.tsx" title="Sales by Region Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalSales: {
    description: 'The total sales amount.',
    type: 'string' 
  },
  regions: {
    description: 'Array of geographic region data.',
    type: 'Region[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "growth": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Sales Funnel Card - Conversion Tracking



# Sales Funnel Card

The Sales Funnel Card Visualize conversion funnel from visitors to purchases.

## Preview

<VectorMotionBlock group="e-commerce" bid="SalesFunnelCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/sales-funnel-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/sales-funnel-card.tsx" title="Sales Funnel Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  overallConversion: {
    description: 'The overall conversion rate percentage.',
    type: 'string' 
  },
  funnelStages: {
    description: 'Array of sales funnel stage data.',
    type: 'FunnelStage[]' ,
    schema: {
          "stage": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Search Analytics Card - Search Performance



# Search Analytics Card

The Search Analytics Card Analyze site search behavior and popular queries.

## Preview

<VectorMotionBlock group="e-commerce" bid="SearchAnalyticsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/search-analytics-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/search-analytics-card.tsx" title="Search Analytics Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalSearches: {
    description: 'The total number of searches.',
    type: 'string' 
  },
  searches: {
    description: 'Array of search query data.',
    type: 'SearchQuery[]' ,
    schema: {
          "query": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "results": {
                "type": "number",
                "optional": false
          },
          "clickRate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Session Duration Card - User Engagement



# Session Duration Card

The Session Duration Card Monitor user engagement time and session length.

## Preview

<VectorMotionBlock group="e-commerce" bid="SessionDurationCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/session-duration-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/session-duration-card.tsx" title="Session Duration Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  averageSessionTime: {
    description: 'The average session time duration.',
    type: 'string' 
  },
  sessionTimeChange: {
    description: 'The change in session time.',
    type: 'number' 
  },
  segments: {
    description: 'Array of segment data.',
    type: 'Segment[]' ,
    schema: {
          "segment": {
                "type": "string",
                "optional": false
          },
          "duration": {
                "type": "string",
                "optional": false
          },
          "seconds": {
                "type": "number",
                "optional": false
          },
          "engagement": {
                "type": "\"low\" | \"medium\" | \"high\"",
                "optional": false
          }
    }
  }
}}
/>


# Shipping Status Card - Logistics Tracking



# Shipping Status Card

The Shipping Status Card Monitor delivery tracking and shipping progress.

## Preview

<VectorMotionBlock group="e-commerce" bid="ShippingStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/shipping-status-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/shipping-status-card.tsx" title="Shipping Status Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  activeShipments: {
    description: 'The count of active shipments.',
    type: 'number' 
  },
  shipments: {
    description: 'Array of shipment data.',
    type: 'Shipment[]' ,
    schema: {
          "id": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          },
          "location": {
                "type": "string",
                "optional": false
          },
          "progress": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# SKU Analytics Card - Product Variant Analysis



# SKU Analytics Card

The SKU Analytics Card Analyze SKU-level performance and insights.

## Preview

<VectorMotionBlock group="e-commerce" bid="SkuAnalyticsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/sku-analytics-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/sku-analytics-card.tsx" title="SKU Analytics Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalSKUs: {
    description: 'The total number of SKUs.',
    type: 'string' 
  },
  avgMargin: {
    description: 'The average margin percentage.',
    type: 'string' 
  },
  skus: {
    description: 'Array of SKU data.',
    type: 'Sku[]' ,
    schema: {
          "sku": {
                "type": "string",
                "optional": false
          },
          "name": {
                "type": "string",
                "optional": false
          },
          "velocity": {
                "type": "\"fast\" | \"medium\" | \"slow\"",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          },
          "margin": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Social Media Traffic Card - Social Analytics



# Social Media Traffic Card

The Social Media Traffic Card Monitor social media referral traffic and conversions.

## Preview

<VectorMotionBlock group="e-commerce" bid="SocialMediaTrafficCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/social-media-traffic-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/social-media-traffic-card.tsx" title="Social Media Traffic Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalVisitorsChange: {
    description: 'The change in total visitors.',
    type: 'number' 
  },
  platforms: {
    description: 'Array of social media platform data.',
    type: 'Platform[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "visitors": {
                "type": "number",
                "optional": false
          },
          "conversions": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Stock Levels Card - Real-time Inventory



# Stock Levels Card

The Stock Levels Card Monitor real-time inventory levels across products.

## Preview

<VectorMotionBlock group="e-commerce" bid="StockLevelsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/stock-levels-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/stock-levels-card.tsx" title="Stock Levels Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalUnits: {
    description: 'The total number of units.',
    type: 'string' 
  },
  lowStockItems: {
    description: 'Array of low stock items.',
    type: 'number' 
  },
  products: {
    description: 'Array of product data.',
    type: 'Product[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "stock": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "\"good\" | \"low\" | \"critical\"",
                "optional": false
          },
          "max": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Supplier Status Card - Supply Chain



# Supplier Status Card

The Supplier Status Card Track supplier performance and delivery metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="SupplierStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/supplier-status-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/supplier-status-card.tsx" title="Supplier Status Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  onTimeDelivery: {
    description: 'The on-time delivery percentage.',
    type: 'string' 
  },
  activeOrders: {
    description: 'The count of active orders.',
    type: 'number' 
  },
  suppliers: {
    description: 'Array of supplier data.',
    type: 'Supplier[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "\"on-time\" | \"delayed\"",
                "optional": false
          },
          "orders": {
                "type": "number",
                "optional": false
          },
          "onTime": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Top Products Card - Best Sellers



# Top Products Card

The Top Products Card Display best-selling products with sales and revenue rankings.

## Preview

<VectorMotionBlock group="e-commerce" bid="TopProductsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/top-products-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/top-products-card.tsx" title="Top Products Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  products: {
    description: 'Array of product data.',
    type: 'Product[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          },
          "revenue": {
                "type": "number",
                "optional": false
          },
          "trend": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Traffic Sources Card - Channel Analytics



# Traffic Sources Card

The Traffic Sources Card Analyze visitor source breakdown and attribution.

## Preview

<VectorMotionBlock group="e-commerce" bid="TrafficSourcesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/traffic-sources-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/traffic-sources-card.tsx" title="Traffic Sources Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  totalVisitors: {
    description: 'The total number of visitors.',
    type: 'string' 
  },
  sources: {
    description: 'Array of traffic source data.',
    type: 'Source[]' ,
    schema: {
          "source": {
                "type": "string",
                "optional": false
          },
          "visitors": {
                "type": "number",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Warehouse Capacity Card - Storage Management



# Warehouse Capacity Card

The Warehouse Capacity Card Monitor storage utilization and warehouse capacity.

## Preview

<VectorMotionBlock group="e-commerce" bid="WarehouseCapacityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/warehouse-capacity-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/warehouse-capacity-card.tsx" title="Warehouse Capacity Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  warehouses: {
    description: 'Array of warehouse data.',
    type: 'WarehouseData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "used": {
                "type": "number",
                "optional": false
          },
          "total": {
                "type": "number",
                "optional": false
          },
          "location": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Warehouse Productivity Card - Efficiency Metrics



# Warehouse Productivity Card

The Warehouse Productivity Card Monitor operational efficiency and productivity metrics.

## Preview

<VectorMotionBlock group="e-commerce" bid="WarehouseProductivityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/warehouse-productivity-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/e-commerce/warehouse-productivity-card.tsx" title="Warehouse Productivity Card" />
  </Tab>
</Tabs>

## Usage

This component is a data-rich dashboard card displaying e-commerce metrics with animated visualizations and dark mode support. Perfect for dashboards, landing pages, and analytics interfaces.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  overallEfficiency: {
    description: 'The overall efficiency percentage.',
    type: 'string' 
  },
  metrics: {
    type: 'Metric[]' ,
    schema: {
          "metric": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "target": {
                "type": "number",
                "optional": false
          },
          "unit": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Admissions Pipeline Card - Student Recruitment



# Admissions Pipeline Card

The Admissions Pipeline Card displays the progression of student applications through the admissions process, showing applied, reviewed, and accepted counts.

## Preview

<VectorMotionBlock group="education" bid="AdmissionsPipelineCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/admissions-pipeline-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/admissions-pipeline-card.tsx" title="Admissions Pipeline Card" />
  </Tab>
</Tabs>

## Usage

This component displays the admissions pipeline with visual indicators for different stages of the application process, helping track student enrollment progress.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'PipelineStage[]' ,
    schema: {
          "stage": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Alumni Donations Card - Fundraising Dashboard



# Alumni Donations Card

The Alumni Donations Card displays fundraising progress, showing total raised year-to-date and progress toward annual goals.

## Preview

<VectorMotionBlock group="education" bid="AlumniDonationsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/alumni-donations-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/alumni-donations-card.tsx" title="Alumni Donations Card" />
  </Tab>
</Tabs>

## Usage

This component helps track alumni fundraising efforts and visualize progress toward financial goals for educational institutions.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalDonation: {
    description: 'The total donation amount.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DonationData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Announcement Card - Communications Dashboard



# Announcement Card

The Announcement Card displays important school board announcements and notices with timestamps and visual indicators.

## Preview

<VectorMotionBlock group="education" bid="AnnouncementCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/announcement-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/announcement-card.tsx" title="Announcement Card" />
  </Tab>
</Tabs>

## Usage

This component provides a visually appealing way to display school announcements, keeping students, parents, and staff informed of important updates.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  announcementTitle: {
    description: 'The title of the announcement.',
    type: 'string' 
  },
  announcementContent: {
    description: 'The content or body of the announcement.',
    type: 'string' 
  },
  timeAgo: {
    description: 'The relative time since the announcement was posted.',
    type: 'string' 
  },
  commentCount: {
    description: 'The number of comments on the announcement.',
    type: 'string' 
  },
  hasUnread: {
    description: 'Whether the announcement has unread comments.',
    type: 'boolean' 
  }
}}
/>


# At-Risk Students Card - Student Support



# At Risk Students Card

The At Risk Students Card displays students who may need intervention, showing the reason for concern (attendance, grades, etc.).

## Preview

<VectorMotionBlock group="education" bid="AtRiskStudentsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/at-risk-students-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/at-risk-students-card.tsx" title="At Risk Students Card" />
  </Tab>
</Tabs>

## Usage

This component helps educators quickly identify students who may need additional support or intervention, enabling proactive assistance.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  total: {
    description: 'The total count of items.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RiskData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Attendance Tracker Card - Student Attendance



# Attendance Tracker Card

The Attendance Tracker Card displays current semester attendance percentage with a visual circular progress indicator and attendance streak information.

## Preview

<VectorMotionBlock group="education" bid="AttendanceTrackerCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/attendance-tracker-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/attendance-tracker-card.tsx" title="Attendance Tracker Card" />
  </Tab>
</Tabs>

## Usage

This component provides a clear visual representation of attendance metrics, helping track student presence and identify attendance patterns.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  average: {
    description: 'The average value or score.',
    type: 'string' 
  },
  averageLabel: {
    description: 'Label describing the average value.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'AttendanceData[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "present": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Budget Utilization Card - Financial Management



# Budget Utilization Card

The Budget Utilization Card displays fiscal year budget utilization with a circular progress indicator showing the percentage of budget used.

## Preview

<VectorMotionBlock group="education" bid="BudgetUtilizationCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/budget-utilization-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/budget-utilization-card.tsx" title="Budget Utilization Card" />
  </Tab>
</Tabs>

## Usage

This component helps educational institutions monitor budget spending throughout the fiscal year, ensuring financial resources are managed effectively.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalBudget: {
    description: 'The total budget amount.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'BudgetData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Cafeteria Stats Card - Dining Analytics



# Cafeteria Stats Card

The Cafeteria Stats Card displays daily meal statistics including lunches served and inventory status.

## Preview

<VectorMotionBlock group="education" bid="CafeteriaStatsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/cafeteria-stats-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/cafeteria-stats-card.tsx" title="Cafeteria Stats Card" />
  </Tab>
</Tabs>

## Usage

This component helps track cafeteria operations, monitor meal service volume, and manage food inventory levels.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalServed: {
    description: 'The total number of items served or distributed.',
    type: 'string' 
  },
  status: {
    description: 'The status indicator for the component.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CafeteriaData[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "meals": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Class Average Card - Academic Performance



# Class Average Card

The Class Average Card shows the overall class average performance and compares individual student performance to the class average.

## Preview

<VectorMotionBlock group="education" bid="ClassAverageCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/class-average-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/class-average-card.tsx" title="Class Average Card" />
  </Tab>
</Tabs>

## Usage

This component helps students understand their performance relative to the class average, providing context for their academic standing.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  average: {
    description: 'The average value or score.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ClassAverageData[]' ,
    schema: {
          "grade": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Class Participation Card - Engagement Metrics



# Class Participation Card

The Class Participation Card displays student participation and engagement scores with a visual progress bar.

## Preview

<VectorMotionBlock group="education" bid="ClassParticipationCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/class-participation-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/class-participation-card.tsx" title="Class Participation Card" />
  </Tab>
</Tabs>

## Usage

This component helps track and visualize student participation levels in class activities, encouraging active engagement.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  scoreLabel: {
    type: 'string' 
  },
  scoreValue: {
    description: 'The score or rating value.',
    type: 'string' 
  },
  scoreStatus: {
    description: 'The status or level of the score.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ParticipationData[]' ,
    schema: {
          "session": {
                "type": "number",
                "optional": false
          },
          "score": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Class Supplies Card - Resource Management



# Class Supplies Card

The Class Supplies Card displays classroom supply inventory status, showing which items are in stock, low, or need refilling.

## Preview

<VectorMotionBlock group="education" bid="ClassSuppliesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/class-supplies-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/class-supplies-card.tsx" title="Class Supplies Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers and administrators track classroom supplies, ensuring materials are available when needed.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  itemCount: {
    description: 'The count of items.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SupplyData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Course Progress Card - Learning Analytics



# Course Progress Card

The Course Progress Card displays progress for multiple courses with visual progress bars showing completion percentages.

## Preview

<VectorMotionBlock group="education" bid="CourseProgressCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/course-progress-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/course-progress-card.tsx" title="Course Progress Card" />
  </Tab>
</Tabs>

## Usage

This component helps students and educators track progress across multiple courses, providing a clear overview of completion status.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  averageProgress: {
    description: 'The average progress percentage.',
    type: 'string' 
  },
  averageLabel: {
    description: 'Label describing the average value.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CourseProgressData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "progress": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Curriculum Progress Card - Program Planning



# Curriculum Progress Card

The Curriculum Progress Card displays curriculum and syllabus coverage progress, showing how much of the planned content has been covered.

## Preview

<VectorMotionBlock group="education" bid="CurriculumProgressCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/curriculum-progress-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/curriculum-progress-card.tsx" title="Curriculum Progress Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers track curriculum coverage, ensuring all required topics are covered before exams and assessments.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  progressValue: {
    type: 'string' 
  },
  progressLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CurriculumData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Discipline Record Card - Student Conduct



# Discipline Record Card

The Discipline Record Card displays student conduct and discipline record status, showing incidents and overall behavior rating.

## Preview

<VectorMotionBlock group="education" bid="DisciplineRecordCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/discipline-record-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/discipline-record-card.tsx" title="Discipline Record Card" />
  </Tab>
</Tabs>

## Usage

This component helps track student behavior and conduct records, providing a clear view of disciplinary status.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DisciplineData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "incidents": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Dorm Occupancy Card - Housing Management



# Dorm Occupancy Card

The Dorm Occupancy Card displays dormitory and housing occupancy rates across different residence halls.

## Preview

<VectorMotionBlock group="education" bid="DormOccupancyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/dorm-occupancy-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/dorm-occupancy-card.tsx" title="Dorm Occupancy Card" />
  </Tab>
</Tabs>

## Usage

This component helps housing administrators track dormitory occupancy rates and manage residential facilities effectively.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'OccupancyData[]' ,
    schema: {
          "hall": {
                "type": "string",
                "optional": false
          },
          "occupancy": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Enrollment Stats Card - Student Population



# Enrollment Stats Card

The Enrollment Stats Card displays total student enrollment with year-over-year growth metrics and academic year information.

## Preview

<VectorMotionBlock group="education" bid="EnrollmentStatsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/enrollment-stats-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/enrollment-stats-card.tsx" title="Enrollment Stats Card" />
  </Tab>
</Tabs>

## Usage

This component provides key enrollment metrics, helping administrators understand student population trends and growth.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalStudents: {
    description: 'The total number of students.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'EnrollmentData[]' ,
    schema: {
          "year": {
                "type": "string",
                "optional": false
          },
          "students": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Exam Analysis Card - Assessment Results



# Exam Analysis Card

The Exam Analysis Card displays exam statistics with grade distribution bars and average score information.

## Preview

<VectorMotionBlock group="education" bid="ExamAnalysisCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/exam-analysis-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/exam-analysis-card.tsx" title="Exam Analysis Card" />
  </Tab>
</Tabs>

## Usage

This component helps educators analyze exam performance, showing grade distribution and average scores for assessment insights.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  avgLabel: {
    description: 'Label describing the average score context.',
    type: 'string' 
  },
  avgScore: {
    description: 'The average score across all quizzes.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ExamData[]' ,
    schema: {
          "grade": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Extracurricular Card - Student Activities



# Extra Curricular Card

The Extra Curricular Card displays student club participation and upcoming meeting information.

## Preview

<VectorMotionBlock group="education" bid="ExtraCurricularCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/extra-curricular-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/extra-curricular-card.tsx" title="Extra Curricular Card" />
  </Tab>
</Tabs>

## Usage

This component helps students and administrators track participation in extracurricular activities and club meetings.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ClubData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "hours": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Facility Status Card - Campus Management



# Facility Status Card

The Facility Status Card displays facility maintenance status, showing open tickets and issues that need attention.

## Preview

<VectorMotionBlock group="education" bid="FacilityStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/facility-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/facility-status-card.tsx" title="Facility Status Card" />
  </Tab>
</Tabs>

## Usage

This component helps facilities management track maintenance requests and ensure school facilities remain in good condition.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'FacilityData[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Grade Overview Card - Academic Records



# Grade Overview Card

The Grade Overview Card displays recent grade performance with animated bar charts showing grade trends and GPA status.

## Preview

<VectorMotionBlock group="education" bid="GradeOverviewCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/grade-overview-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/grade-overview-card.tsx" title="Grade Overview Card" />
  </Tab>
</Tabs>

## Usage

This component provides a visual overview of recent academic performance, helping students track their grade trends and GPA.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'GradeData[]' ,
    schema: {
          "term": {
                "type": "string",
                "optional": false
          },
          "gpa": {
                "type": "number",
                "optional": false
          }
    }
  },
  chartColor: {
    description: 'The color of the chart or visualization.',
    type: 'string' 
  }
}}
/>


# Grading Queue Card - Teacher Workflow



# Grading Queue Card

The Grading Queue Card displays pending grading assignments with due dates and provides quick access to start grading.

## Preview

<VectorMotionBlock group="education" bid="GradingQueueCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/grading-queue-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/grading-queue-card.tsx" title="Grading Queue Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers manage their grading workload by displaying pending assignments and their due dates.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalPending: {
    description: 'The total number of pending items.',
    type: 'string' 
  },
  pendingLabel: {
    description: 'Label for pending items.',
    type: 'string' 
  },
  dueDate: {
    description: 'The due date for the item.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'GradingData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Graduation Rate Card - Student Success



# Graduation Rate Card

The Graduation Rate Card displays projected graduation rates with year-over-year comparisons and class information.

## Preview

<VectorMotionBlock group="education" bid="GraduationRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/graduation-rate-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/graduation-rate-card.tsx" title="Graduation Rate Card" />
  </Tab>
</Tabs>

## Usage

This component helps administrators track graduation rates and monitor institutional success metrics over time.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  rateValue: {
    description: 'The rate or rating value.',
    type: 'string' 
  },
  rateTrend: {
    description: 'The trend direction of the rate.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'GraduationData[]' ,
    schema: {
          "year": {
                "type": "string",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Homework Status Card - Assignment Tracking



# Homework Status Card

The Homework Status Card displays weekly homework status, showing completed, pending, and late assignments.

## Preview

<VectorMotionBlock group="education" bid="HomeworkStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/homework-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/homework-status-card.tsx" title="Homework Status Card" />
  </Tab>
</Tabs>

## Usage

This component helps students track their homework completion status, providing a clear view of assignments by status.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'HomeworkData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  },
  overallProgress: {
    description: 'The overall progress percentage.',
    type: 'string' 
  },
  completedLabel: {
    description: 'Label for completed items.',
    type: 'string' 
  },
  completedValue: {
    description: 'The value or count of completed items.',
    type: 'string' 
  },
  pendingLabel: {
    description: 'Label for pending items.',
    type: 'string' 
  },
  pendingValue: {
    description: 'The value or count of pending items.',
    type: 'string' 
  },
  nextTaskLabel: {
    description: 'Label for the next task.',
    type: 'string' 
  },
  nextTaskName: {
    description: 'The name or title of the next task.',
    type: 'string' 
  },
  nextTaskDue: {
    description: 'The due date of the next task.',
    type: 'string' 
  }
}}
/>


# IT System Status Card - Technical Infrastructure



# IT System Status Card

The IT System Status Card displays the status of key IT systems including LMS, WiFi, and email servers with status indicators.

## Preview

<VectorMotionBlock group="education" bid="ItSystemStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/it-system-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/it-system-status-card.tsx" title="IT System Status Card" />
  </Tab>
</Tabs>

## Usage

This component helps IT administrators monitor the health and status of critical educational technology systems.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SystemData[]' ,
    schema: {
          "system": {
                "type": "string",
                "optional": false
          },
          "uptime": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Lesson Completion Card - Learning Progress



# Lesson Completion Card

The Lesson Completion Card displays lessons completed today with checkmarks and visual indicators for completion status.

## Preview

<VectorMotionBlock group="education" bid="LessonCompletionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/lesson-completion-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/lesson-completion-card.tsx" title="Lesson Completion Card" />
  </Tab>
</Tabs>

## Usage

This component helps students track their daily lesson completion, providing motivation and progress visibility.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  completedCount: {
    description: 'The count of completed items.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CompletionData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Lesson Plan Card - Curriculum Management



# Lesson Plan Card

The Lesson Plan Card displays the weekly lesson plan status, showing which days have plans prepared and which are pending.

## Preview

<VectorMotionBlock group="education" bid="LessonPlanCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/lesson-plan-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/lesson-plan-card.tsx" title="Lesson Plan Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers organize and track their weekly lesson planning, ensuring all days are properly prepared.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  completedValue: {
    description: 'The value or count of completed items.',
    type: 'string' 
  },
  completedLabel: {
    description: 'Label for completed items.',
    type: 'string' 
  },
  onTrackLabel: {
    description: 'Label indicating on-track status.',
    type: 'string' 
  },
  percentageDone: {
    description: 'The percentage of work completed.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'LessonData[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "lessons": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Library Due Date Card - Book Management



# Library Due Date Card

The Library Due Date Card displays books currently on loan with due date information and overdue warnings.

## Preview

<VectorMotionBlock group="education" bid="LibraryDueDateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/library-due-date-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/library-due-date-card.tsx" title="Library Due Date Card" />
  </Tab>
</Tabs>

## Usage

This component helps students track their library book loans and due dates, preventing overdue fines.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalBooks: {
    description: 'The total number of books.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DueDateData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Library Stats Card - Library Analytics



# Library Stats Card

The Library Stats Card displays library circulation statistics including books checked out and overdue items.

## Preview

<VectorMotionBlock group="education" bid="LibraryStatsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/library-stats-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/library-stats-card.tsx" title="Library Stats Card" />
  </Tab>
</Tabs>

## Usage

This component helps library administrators monitor circulation statistics and track overdue materials.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CirculationData[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Online Class Status Card - Distance Learning



# Online Class Status Card

The Online Class Status Card displays information about currently active online classes with join functionality.

## Preview

<VectorMotionBlock group="education" bid="OnlineClassStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/online-class-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/online-class-status-card.tsx" title="Online Class Status Card" />
  </Tab>
</Tabs>

## Usage

This component helps students and teachers monitor live virtual classes and provides quick access to join active sessions.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ClassStatusData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "quality": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Parent Communication Card - Family Engagement



# Parent Communication Card

The Parent Communication Card displays unread messages from parents and provides quick access to the communication inbox.

## Preview

<VectorMotionBlock group="education" bid="ParentCommCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/parent-comm-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/parent-comm-card.tsx" title="Parent Communication Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers manage parent communications, ensuring important messages are not missed.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CommData[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Parent Meeting Card - Conference Management



# Parent Meeting Card

The Parent Meeting Card displays upcoming parent-teacher conferences with dates, times, and location information.

## Preview

<VectorMotionBlock group="education" bid="ParentMeetingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/parent-meeting-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/parent-meeting-card.tsx" title="Parent Meeting Card" />
  </Tab>
</Tabs>

## Usage

This component helps teachers and administrators schedule and track parent-teacher conferences, ensuring effective communication.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalMeetings: {
    description: 'The total number of meetings.',
    type: 'number' 
  },
  nextMeetingTitle: {
    description: 'The title of the next meeting.',
    type: 'string' 
  },
  nextMeetingTime: {
    description: 'The time of the next meeting.',
    type: 'string' 
  },
  pendingRequests: {
    description: 'The number of pending requests.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MeetingData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Peer Review Card - Collaborative Learning



# Peer Review Card

The Peer Review Card displays average peer review ratings for group projects with feedback quotes.

## Preview

<VectorMotionBlock group="education" bid="PeerReviewCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/peer-review-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/peer-review-card.tsx" title="Peer Review Card" />
  </Tab>
</Tabs>

## Usage

This component helps students and teachers track peer review feedback for collaborative projects and group work.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  ratingValue: {
    description: 'The rating value.',
    type: 'number' 
  },
  maxRating: {
    description: 'The maximum rating value.',
    type: 'number' 
  },
  comment: {
    description: 'The comment or feedback text.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ReviewData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Professional Development Card - Staff Training



# Professional Development Card

The Professional Development Card displays professional development hours completed toward certification requirements with progress tracking.

## Preview

<VectorMotionBlock group="education" bid="ProfessionalDevCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/professional-dev-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/professional-dev-card.tsx" title="Professional Development Card" />
  </Tab>
</Tabs>

## Usage

This component helps educators track their professional development progress toward certification and continuing education requirements.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  deadline: {
    description: 'The deadline date or time for the item.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DevData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "hours": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Project Submission Card - Assignment Tracking



# Project Submission Card

The Project Submission Card displays project submission status with progress tracking for major assignments.

## Preview

<VectorMotionBlock group="education" bid="ProjectSubmissionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/project-submission-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/project-submission-card.tsx" title="Project Submission Card" />
  </Tab>
</Tabs>

## Usage

This component helps students track their project submission status, ensuring all major assignments are completed on time.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalProjects: {
    description: 'The total number of projects.',
    type: 'number' 
  },
  nextDeadlineLabel: {
    description: 'Label for the next deadline.',
    type: 'string' 
  },
  nextDeadlineTitle: {
    description: 'The title or name of the next deadline.',
    type: 'string' 
  },
  nextDeadlineTime: {
    description: 'The time or date of the next deadline.',
    type: 'string' 
  },
  teamLabel: {
    description: 'Label for the team.',
    type: 'string' 
  },
  teamValue: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SubmissionData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Quiz Result Card - Assessment Analytics



# Quiz Result Card

The Quiz Result Card displays the most recent quiz results with score, percentage, and performance feedback.

## Preview

<VectorMotionBlock group="education" bid="QuizResultCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/quiz-result-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/education/quiz-result-card.tsx" title="Quiz Result Card" />
  </Tab>
</Tabs>

## Usage

This component provides students with immediate feedback on quiz performance, displaying scores and encouraging messages.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'QuizData[]' ,
    schema: {
          "subject": {
                "type": "string",
                "optional": false
          },
          "A": {
                "type": "number",
                "optional": false
          },
          "fullMark": {
                "type": "number",
                "optional": false
          }
    }
  },
  topScore: {
    description: 'The highest score achieved in the quiz.',
    type: 'string' 
  },
  topSubject: {
    description: 'The subject with the highest score.',
    type: 'string' 
  },
  avgScore: {
    description: 'The average score across all quizzes.',
    type: 'string' 
  },
  avgLabel: {
    description: 'Label describing the average score context.',
    type: 'string' 
  }
}}
/>


# Accounts Payable Card - Vendor Payments



# Finance Accounts Payable Card

The Finance Accounts Payable Card helps businesses monitor outstanding payments to vendors, displaying total payables and upcoming payment obligations.

## Preview

<VectorMotionBlock group="finance" bid="AccountsPayableCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-accounts-payable-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-accounts-payable-card.tsx" title="Finance Accounts Payable Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalAmount: {
    type: 'string' 
  },
  statusText: {
    type: 'string' 
  },
  items: {
    type: 'Item[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "string",
                "optional": false
          },
          "due": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Aging Receivables Card - Collections Management



# Finance Aging Receivables Card

The Finance Aging Receivables Card tracks outstanding customer payments categorized by aging periods, helping businesses manage cash flow and identify overdue accounts.

## Preview

<VectorMotionBlock group="finance" bid="AgingReceivablesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-aging-receivables-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-aging-receivables-card.tsx" title="Finance Aging Receivables Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalAmount: {
    type: 'string' 
  },
  statusText: {
    type: 'string' 
  },
  riskAmount: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DataItem[]' ,
    schema: {
          "range": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Asset Allocation Drift Card - Portfolio Management



# Finance Asset Allocation Drift Card

The Finance Asset Allocation Drift Card tracks how your current portfolio allocation compares to target allocations, helping investors maintain their desired asset mix and rebalance when necessary.

## Preview

<VectorMotionBlock group="finance" bid="AssetAllocationDriftCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-asset-allocation-drift-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-asset-allocation-drift-card.tsx" title="Finance Asset Allocation Drift Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  driftValue: {
    type: 'string' 
  },
  driftLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DataItem[]' ,
    schema: {
          "asset": {
                "type": "string",
                "optional": false
          },
          "drift": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Audit Log Card - Compliance Tracking



# Finance Audit Log Card

The Finance Audit Log Card displays recent financial system activities and changes, providing transparency and accountability for financial operations.

## Preview

<VectorMotionBlock group="finance" bid="AuditLogCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-audit-log-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-audit-log-card.tsx" title="Finance Audit Log Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  eventCount: {
    type: 'number' 
  },
  eventLabel: {
    type: 'string' 
  },
  activityData: {
    type: 'ActivityData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "events": {
                "type": "number",
                "optional": false
          }
    }
  },
  logs: {
    type: 'Log[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "action": {
                "type": "string",
                "optional": false
          },
          "user": {
                "type": "string",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "iconName": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Budget vs Actual Card - Financial Planning



# Finance Budget vs Actual Card

The Finance Budget vs Actual Card helps teams track spending against budgets, identifying variances and enabling better financial control.

## Preview

<VectorMotionBlock group="finance" bid="BudgetVsActualCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-budget-vs-actual-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-budget-vs-actual-card.tsx" title="Finance Budget vs Actual Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  dateLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DataItem[]' ,
    schema: {
          "category": {
                "type": "string",
                "optional": false
          },
          "budget": {
                "type": "number",
                "optional": false
          },
          "actual": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Finance Burn Rate



# Finance Burn Rate

The Finance Burn Rate page presents a Cash Runway Tracker component that summarizes monthly spending and cash runway left. This visual tool helps teams understand their financial health, forecast sustainability, and make data-driven business decisions.

## Preview

<VectorMotionBlock group="finance" bid="BurnRateBlock" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-burn-rate.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-burn-rate.tsx" title="Finance Burn Rate" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentBurn: {
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  runway: {
    type: 'string' 
  },
  runwayLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'BurnData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Customer Acquisition Cost Card - Marketing ROI



# Finance CAC Card

The Finance CAC Card displays Customer Acquisition Cost metrics, breaking down marketing and sales spend to help teams understand the cost of acquiring new customers and optimize their acquisition strategies.

## Preview

<VectorMotionBlock group="finance" bid="CACCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-cac-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-cac-card.tsx" title="Finance CAC Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  target: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CACData[]' ,
    schema: {
          "source": {
                "type": "string",
                "optional": false
          },
          "marketing": {
                "type": "number",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Cap Table Card - Equity Structure



# Finance Cap Table Card

The Finance Cap Table Card displays the company's capitalization table, showing ownership percentages and equity distribution among stakeholders.

## Preview

<VectorMotionBlock group="finance" bid="CapTableCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-cap-table-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-cap-table-card.tsx" title="Finance Cap Table Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CapTableData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Cash Flow Card - Cash Management



# Finance Cash Flow Card

The Finance Cash Flow Card tracks the movement of cash in and out of the business, helping teams understand liquidity and financial health.

## Preview

<VectorMotionBlock group="finance" bid="CashFlowCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-cash-flow-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-cash-flow-card.tsx" title="Finance Cash Flow Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  currentValue: {
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  savingsRate: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CashFlowData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "income": {
                "type": "number",
                "optional": false
          },
          "expense": {
                "type": "number",
                "optional": false
          },
          "net": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Churn Rate Card - Customer Retention



# Finance Churn Rate Card

The Finance Churn Rate Card monitors customer retention by tracking churn rate, helping subscription businesses understand and reduce customer attrition.

## Preview

<VectorMotionBlock group="finance" bid="ChurnRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-churn-rate-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-churn-rate-card.tsx" title="Finance Churn Rate Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  retentionRate: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ChurnData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Commodities Card - Commodity Trading



# Finance Commodities Card

The Finance Commodities Card displays current commodity prices and market trends, helping traders and investors monitor commodity markets.

## Preview

<VectorMotionBlock group="finance" bid="CommoditiesCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-commodities-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-commodities-card.tsx" title="Finance Commodities Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  items: {
    type: 'CommodityItem[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "price": {
                "type": "string",
                "optional": false
          },
          "change": {
                "type": "string",
                "optional": false
          },
          "data": {
                "type": "number[]",
                "optional": false
          }
    }
  }
}}
/>


# Compliance Status Card - Regulatory Compliance



# Finance Compliance Status Card

The Finance Compliance Status Card tracks compliance with financial regulations and reporting requirements, ensuring businesses meet their regulatory obligations.

## Preview

<VectorMotionBlock group="finance" bid="ComplianceStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-compliance-status-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-compliance-status-card.tsx" title="Finance Compliance Status Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  score: {
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  checks: {
    type: 'string[]' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ComplianceData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Credit Score Card - Credit Risk



# Finance Credit Score Card

The Finance Credit Score Card shows credit score information and contributing factors, helping individuals and businesses monitor their creditworthiness.

## Preview

<VectorMotionBlock group="finance" bid="CreditScoreCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-credit-score-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-credit-score-card.tsx" title="Finance Credit Score Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  score: {
    type: 'number' 
  },
  statusLabel: {
    type: 'string' 
  },
  provider: {
    type: 'string' 
  },
  providerStatus: {
    type: 'string' 
  },
  change: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CreditScoreData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Debt to Equity Card - Financial Leverage



# Finance Debt to Equity Card

The Finance Debt to Equity Card displays the company's debt-to-equity ratio, a key metric for assessing financial leverage and capital structure.

## Preview

<VectorMotionBlock group="finance" bid="DebtEquityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-debt-equity-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-debt-equity-card.tsx" title="Finance Debt to Equity Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  ratio: {
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  leverage: {
    type: 'string' 
  },
  industryAvg: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DebtEquityData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Dividend Calendar Card - Dividend Tracking



# Finance Dividend Calendar Card

The Finance Dividend Calendar Card displays upcoming dividend payment dates and amounts, helping investors manage their dividend income.

## Preview

<VectorMotionBlock group="finance" bid="DividendCalendarCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-dividend-calendar-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-dividend-calendar-card.tsx" title="Finance Dividend Calendar Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalPayout: {
    type: 'string' 
  },
  payoutLabel: {
    type: 'string' 
  },
  dividends: {
    type: 'DividendDate[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "symbol": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "string",
                "optional": false
          },
          "payDate": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  },
  chartData: {
    type: 'ChartData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# EBITDA Card - Financial Performance



# Finance EBITDA Card

The Finance EBITDA Card displays EBITDA metrics, a key indicator of operational profitability and financial performance.

## Preview

<VectorMotionBlock group="finance" bid="EBITDACard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-ebitda-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-ebitda-card.tsx" title="Finance EBITDA Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  amount: {
    type: 'string' 
  },
  periodLabel: {
    type: 'string' 
  },
  trendData: {
    type: 'TrendData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "val": {
                "type": "number",
                "optional": false
          }
    }
  },
  revenue: {
    type: 'string' 
  },
  cogs: {
    type: 'string' 
  },
  opex: {
    type: 'string' 
  },
  margin: {
    type: 'string' 
  }
}}
/>


# ESG Score Card - Sustainability Metrics



# Finance ESG Score Card

The Finance ESG Score Card displays ESG (Environmental, Social, and Governance) ratings, helping investors assess corporate sustainability and ethical practices.

## Preview

<VectorMotionBlock group="finance" bid="ESGScoreCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-esg-score-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-esg-score-card.tsx" title="Finance ESG Score Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  score: {
    type: 'string' 
  },
  rankLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'EsgData[]' ,
    schema: {
          "subject": {
                "type": "string",
                "optional": false
          },
          "A": {
                "type": "number",
                "optional": false
          },
          "fullMark": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# ESOP Vesting Card - Employee Equity



# Finance ESOP Vesting Card

The Finance ESOP Vesting Card displays employee stock option plan vesting schedules, helping employees and HR teams track equity compensation.

## Preview

<VectorMotionBlock group="finance" bid="ESOPVestingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-esop-vesting-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-esop-vesting-card.tsx" title="Finance ESOP Vesting Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalOptions: {
    type: 'string' 
  },
  optionsLabel: {
    type: 'string' 
  },
  vestedValue: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'VestingData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "vested": {
                "type": "number",
                "optional": false
          },
          "unvested": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Expense Breakdown Card - Cost Analysis



# Finance Expense Breakdown Card

The Finance Expense Breakdown Card categorizes and visualizes expenses, helping teams understand spending patterns and identify cost optimization opportunities.

## Preview

<VectorMotionBlock group="finance" bid="ExpenseBreakdownCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-expense-breakdown-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-expense-breakdown-card.tsx" title="Finance Expense Breakdown Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalSpend: {
    type: 'string' 
  },
  spendLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ExpenseCategory[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Forex Card - Foreign Exchange Trading



# Finance Forex Card

The Finance Forex Card displays real-time foreign exchange rates and currency trends, helping traders and businesses manage currency exposure.

## Preview

<VectorMotionBlock group="finance" bid="ForexCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-forex-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-forex-card.tsx" title="Finance Forex Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  usdValue: {
    type: 'string' 
  },
  eurBaseValue: {
    type: 'number' 
  }
}}
/>


# Fraud Alerts Card - Risk Management



# Finance Fraud Alerts Card

The Finance Fraud Alerts Card displays potential fraud alerts and suspicious transactions, helping businesses protect against financial fraud.

## Preview

<VectorMotionBlock group="finance" bid="FraudAlertsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-fraud-alerts-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-fraud-alerts-card.tsx" title="Finance Fraud Alerts Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  alertCount: {
    type: 'string' 
  },
  alertLabel: {
    type: 'string' 
  },
  alertDetailsTitle: {
    type: 'string' 
  },
  alertDetailsLocation: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'AlertData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# FX Exposure Card - Currency Risk



# Finance FX Exposure Card

The Finance FX Exposure Card monitors currency exposure across different markets, helping businesses manage foreign exchange risk.

## Preview

<VectorMotionBlock group="finance" bid="FXExposureCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-fx-exposure-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-fx-exposure-card.tsx" title="Finance FX Exposure Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalRisk: {
    type: 'string' 
  },
  riskLabel: {
    type: 'string' 
  },
  hedgedPercentage: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'FXData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Gross Profit Card - Profitability



# Finance Gross Profit Card

The Finance Gross Profit Card displays gross profit and margin metrics, helping businesses assess profitability before operating expenses.

## Preview

<VectorMotionBlock group="finance" bid="GrossProfitCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-gross-profit-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-gross-profit-card.tsx" title="Finance Gross Profit Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  amount: {
    type: 'string' 
  },
  perLabel: {
    type: 'string' 
  },
  change: {
    type: 'string' 
  },
  marginLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ProfitData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "val": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Income Analytics Card - Revenue Analysis



# Finance Income Analytics Card

The Finance Income Analytics Card breaks down income by source and tracks trends over time, helping businesses understand revenue composition.

## Preview

<VectorMotionBlock group="finance" bid="IncomeAnalyticsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-income-analytics-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-income-analytics-card.tsx" title="Finance Income Analytics Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalIncome: {
    type: 'string' 
  },
  change: {
    type: 'string' 
  },
  goalAchievement: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'IncomeData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "income": {
                "type": "number",
                "optional": false
          },
          "target": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Interest Coverage Card - Debt Service



# Finance Interest Coverage Card

The Finance Interest Coverage Card displays the interest coverage ratio, measuring a company's ability to pay interest on outstanding debt.

## Preview

<VectorMotionBlock group="finance" bid="InterestCoverageCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-interest-coverage-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-interest-coverage-card.tsx" title="Finance Interest Coverage Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  description: {
    type: 'string' 
  },
  value: {
    description: 'The primary value or metric displayed.',
    type: 'number' 
  },
  max: {
    type: 'number' 
  },
  statusText: {
    type: 'string' 
  },
  statusSubtext: {
    type: 'string' 
  }
}}
/>


# Inventory Turnover Card - Asset Efficiency



# Finance Inventory Turnover Card

The Finance Inventory Turnover Card monitors how quickly inventory is sold and replaced, helping businesses optimize inventory management.

## Preview

<VectorMotionBlock group="finance" bid="InventoryTurnoverCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-inventory-turnover-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-inventory-turnover-card.tsx" title="Finance Inventory Turnover Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  turnoverRate: {
    type: 'string' 
  },
  periodLabel: {
    type: 'string' 
  },
  velocityLabel: {
    type: 'string' 
  },
  velocityStatus: {
    type: 'string' 
  },
  daysSales: {
    type: 'string' 
  },
  stockoutRisk: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'InventoryData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Investment Card - Investment Portfolio



# Finance Investment Card

The Finance Investment Card displays investment holdings and performance metrics, helping investors monitor their investment portfolio.

## Preview

<VectorMotionBlock group="finance" bid="InvestmentCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-investment-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-investment-card.tsx" title="Finance Investment Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalValue: {
    type: 'string' 
  },
  change: {
    type: 'string' 
  },
  ytdReturn: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'InvestmentData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Loan Card - Debt Management



# Finance Loan Card

The Finance Loan Card displays loan information including balance, interest rate, and payment schedules, helping borrowers track their debt obligations.

## Preview

<VectorMotionBlock group="finance" bid="LoanCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-loan-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-loan-card.tsx" title="Finance Loan Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  amount: {
    type: 'string' 
  },
  amountLabel: {
    type: 'string' 
  },
  equityPercentage: {
    type: 'string' 
  },
  nextPaymentDate: {
    type: 'string' 
  },
  nextPaymentAmount: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'LoanData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Loan-to-Value Card - Real Estate Finance



# Finance LTV Card

The Finance LTV Card displays Customer Lifetime Value metrics, helping businesses understand the long-term value of their customer relationships.

## Preview

<VectorMotionBlock group="finance" bid="LTVCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-ltv-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-ltv-card.tsx" title="Finance LTV Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  ltv: {
    type: 'string' 
  },
  ltvLabel: {
    type: 'string' 
  },
  ratioLabel: {
    type: 'string' 
  },
  ratioValue: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'LTVData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "ltv": {
                "type": "number",
                "optional": false
          },
          "cac": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Monthly Recurring Revenue Card - Subscription Metrics



# Finance MRR Card

The Finance MRR Card presents Monthly Recurring Revenue growth trends with a bar chart visualization, helping SaaS and subscription businesses monitor their recurring revenue performance over time.

## Preview

<VectorMotionBlock group="finance" bid="MRRCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-mrr-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-mrr-card.tsx" title="Finance MRR Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  amount: {
    type: 'string' 
  },
  growth: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MRRData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "val": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Net Income Card - Bottom Line



# Finance Net Income Card

The Finance Net Income Card displays net income metrics and trends, showing the company's bottom-line profitability after all expenses.

## Preview

<VectorMotionBlock group="finance" bid="NetIncomeCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-net-income-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-net-income-card.tsx" title="Finance Net Income Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalIncome: {
    type: 'string' 
  },
  incomeLabel: {
    type: 'string' 
  },
  profitLabel: {
    type: 'string' 
  },
  targetLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'NetIncomeData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "margin": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Financial News Card - Market Intelligence



# Finance News Feed Card

The Finance News Feed Card displays relevant financial news and market updates, helping users stay informed about market-moving events.

## Preview

<VectorMotionBlock group="finance" bid="NewsFeedCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-news-feed-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-news-feed-card.tsx" title="Finance News Feed Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  topStoriesLabel: {
    type: 'string' 
  },
  sentimentLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'NewsItem[]' ,
    schema: {
          "title": {
                "type": "string",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "sentiment": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Operating Margin Card - Operational Efficiency



# Finance Operating Margin Card

The Finance Operating Margin Card displays operating margin percentages, measuring operational efficiency and profitability.

## Preview

<VectorMotionBlock group="finance" bid="OperatingMarginCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-operating-margin-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-operating-margin-card.tsx" title="Finance Operating Margin Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  marginValue: {
    type: 'string' 
  },
  marginChange: {
    type: 'string' 
  },
  targetLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MarginData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "margin": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Payroll Summary Card - HR Finance



# Finance Payroll Summary Card

The Finance Payroll Summary Card displays payroll expenses and employee compensation data, helping HR and finance teams manage labor costs.

## Preview

<VectorMotionBlock group="finance" bid="PayrollSummaryCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-payroll-summary-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-payroll-summary-card.tsx" title="Finance Payroll Summary Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalCost: {
    type: 'string' 
  },
  employeeCount: {
    type: 'string' 
  },
  breakdown: {
    type: 'BreakdownItem[]' ,
    schema: {
          "dept": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "cost": {
                "type": "string",
                "optional": false
          },
          "growth": {
                "type": "string",
                "optional": false
          }
    }
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'PayrollData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "eng": {
                "type": "number",
                "optional": false
          },
          "sales": {
                "type": "number",
                "optional": false
          },
          "ops": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Peer Comparison Card - Competitive Analysis



# Finance Peer Comparison Card

The Finance Peer Comparison Card benchmarks company performance against industry peers, providing competitive context for financial metrics.

## Preview

<VectorMotionBlock group="finance" bid="PeerComparisonCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-peer-comparison-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-peer-comparison-card.tsx" title="Finance Peer Comparison Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  rank: {
    type: 'string' 
  },
  rankLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'PeerData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "highlight": {
                "type": "boolean",
                "optional": false
          }
    }
  }
}}
/>


# Portfolio Card - Asset Management



# Finance Portfolio Card

The Finance Portfolio Card displays current investment holdings with allocation percentages and performance metrics, helping investors track their portfolio distribution and individual asset performance.

## Preview

<VectorMotionBlock group="finance" bid="PortfolioCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-portfolio-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-portfolio-card.tsx" title="Finance Portfolio Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalValue: {
    type: 'string' 
  },
  totalValueLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'AssetData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "fullName": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "string",
                "optional": false
          },
          "change": {
                "type": "string",
                "optional": false
          },
          "percent": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Quick Ratio Card - Liquidity Analysis



# Finance Quick Ratio Card

The Finance Quick Ratio Card displays the quick ratio (acid-test ratio), measuring a company's ability to meet short-term obligations with liquid assets.

## Preview

<VectorMotionBlock group="finance" bid="QuickRatioCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-quick-ratio-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-quick-ratio-card.tsx" title="Finance Quick Ratio Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  ratio: {
    type: 'string' 
  },
  ratioStatus: {
    type: 'string' 
  },
  acidTestLabel: {
    type: 'string' 
  },
  acidTestStatus: {
    type: 'string' 
  },
  liquidAssetsLabel: {
    type: 'string' 
  },
  liquidAssetsValue: {
    type: 'string' 
  },
  currentLiabLabel: {
    type: 'string' 
  },
  currentLiabValue: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'QuickRatioData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying quick ratio metrics with animated visualizations and dark mode support.


# Revenue Streams Card - Revenue Sources



# Finance Revenue Streams Card

The Finance Revenue Streams Card breaks down revenue by different sources, helping businesses understand their revenue composition and diversification.

## Preview

<VectorMotionBlock group="finance" bid="RevenueStreamsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-revenue-streams-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-revenue-streams-card.tsx" title="Finance Revenue Streams Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalRevenue: {
    type: 'string' 
  },
  revenueGrowth: {
    type: 'string' 
  },
  recurringLabel: {
    type: 'string' 
  },
  oneTimeLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RevenueData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying revenue streams data with animated visualizations and dark mode support.


# Risk Heatmap Card - Risk Analysis



# Finance Risk Heatmap Card

The Finance Risk Heatmap Card displays a visual representation of financial risks across different categories, helping teams identify and prioritize risk management.

## Preview

<VectorMotionBlock group="finance" bid="RiskHeatmapCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-risk-heatmap-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-risk-heatmap-card.tsx" title="Finance Risk Heatmap Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RiskData[]' ,
    schema: {
          "x": {
                "type": "number",
                "optional": false
          },
          "y": {
                "type": "number",
                "optional": false
          },
          "z": {
                "type": "number",
                "optional": false
          },
          "risk": {
                "type": "string",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying risk heatmap data with animated visualizations and dark mode support.


# Return on Assets Card - Asset Returns



# Finance ROA Card

The Finance ROA Card displays Return on Assets metrics, measuring how efficiently a company uses its assets to generate profit.

## Preview

<VectorMotionBlock group="finance" bid="ROACard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-roa-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-roa-card.tsx" title="Finance ROA Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  roaLabel: {
    type: 'string' 
  },
  roaChange: {
    type: 'string' 
  },
  efficiencyLabel: {
    type: 'string' 
  },
  efficiencyStatus: {
    type: 'string' 
  },
  netIncomeLabel: {
    type: 'string' 
  },
  assetsLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ROAData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying ROA metrics with animated visualizations and dark mode support.


# Return on Equity Card - Shareholder Returns



# Finance ROE Card

The Finance ROE Card displays Return on Equity metrics, measuring the profitability generated from shareholders' equity.

## Preview

<VectorMotionBlock group="finance" bid="ROECard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-roe-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-roe-card.tsx" title="Finance ROE Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  roeLabel: {
    type: 'string' 
  },
  roeStatus: {
    type: 'string' 
  },
  leverageLabel: {
    type: 'string' 
  },
  leverageStatus: {
    type: 'string' 
  },
  equityLabel: {
    type: 'string' 
  },
  equityStatus: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ROEData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying ROE metrics with animated visualizations and dark mode support.


# Savings Goal Card - Personal Finance



# Finance Savings Goal Card

The Finance Savings Goal Card helps users track progress toward savings goals, visualizing current savings against targets.

## Preview

<VectorMotionBlock group="finance" bid="SavingsGoalCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-savings-goal-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-savings-goal-card.tsx" title="Finance Savings Goal Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  currentAmount: {
    type: 'string' 
  },
  targetAmount: {
    type: 'string' 
  },
  progressLabel: {
    type: 'string' 
  },
  progressPercentage: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SavingsData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying savings goal progress with animated visualizations and dark mode support.


# Security Card - Investment Holdings



# Finance Security Card

The Finance Security Card displays individual security holdings and performance, helping investors track specific investments.

## Preview

<VectorMotionBlock group="finance" bid="SecurityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-security-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-security-card.tsx" title="Finance Security Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  score: {
    type: 'string' 
  },
  scoreLabel: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SecurityData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>

## Usage

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


# Stock Watchlist Card - Stock Tracking



# Finance Stock Watchlist Card

The Finance Stock Watchlist Card displays a customizable list of stocks to monitor, showing current prices and performance metrics.

## Preview

<VectorMotionBlock group="finance" bid="StockWatchlistCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-stock-watchlist-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-stock-watchlist-card.tsx" title="Finance Stock Watchlist Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  watchlist: {
    type: 'StockData[]' ,
    schema: {
          "symbol": {
                "type": "string",
                "optional": false
          },
          "price": {
                "type": "string",
                "optional": false
          },
          "change": {
                "type": "string",
                "optional": false
          },
          "data": {
                "type": "number[]",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying stock watchlist data with animated visualizations and dark mode support.


# Subscriptions Card - Recurring Billing



# Finance Subscriptions Card

The Finance Subscriptions Card tracks recurring subscription expenses, helping users manage and optimize their subscription spending.

## Preview

<VectorMotionBlock group="finance" bid="SubscriptionsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-subscriptions-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-subscriptions-card.tsx" title="Finance Subscriptions Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  totalCost: {
    type: 'string' 
  },
  periodLabel: {
    type: 'string' 
  },
  subscriptions: {
    type: 'Subscription[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "name": {
                "type": "string",
                "optional": false
          },
          "cost": {
                "type": "string",
                "optional": false
          },
          "due": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  },
  chartData: {
    type: 'SubscriptionChartData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  },
  totalFixedLabel: {
    type: 'string' 
  },
  totalFixedValue: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying subscription data with animated visualizations and dark mode support.


# Tax Estimation Card - Tax Planning



# Finance Tax Estimation Card

The Finance Tax Estimation Card provides tax liability estimates based on income and deductions, helping users plan for tax obligations.

## Preview

<VectorMotionBlock group="finance" bid="TaxEstimationCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-tax-estimation-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-tax-estimation-card.tsx" title="Finance Tax Estimation Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  paidAmount: {
    type: 'number' 
  },
  estimatedAmount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'TaxData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  nextQuarterLabel: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying tax estimation data with animated visualizations and dark mode support.


# Transactions Card - Transaction History



# Finance Transactions Card

The Finance Transactions Card displays recent financial transactions with details, helping users track their spending and income activity.

## Preview

<VectorMotionBlock group="finance" bid="TransactionsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-transactions-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-transactions-card.tsx" title="Finance Transactions Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  newTransactionsCount: {
    type: 'string' 
  },
  transactions: {
    type: 'Transaction[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "name": {
                "type": "string",
                "optional": false
          },
          "date": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "string",
                "optional": false
          },
          "icon": {
                "type": "LucideIcon",
                "optional": false
          },
          "type": {
                "type": "string",
                "optional": false
          }
    }
  },
  sparkData: {
    type: 'SparkData[]' ,
    schema: {
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>

## Usage

This component is a demo card displaying transaction history with animated visualizations and dark mode support.


# Treasury Yield Card - Fixed Income



# Finance Treasury Yield Card

The Finance Treasury Yield Card displays current treasury bond yields across different maturities, helping investors track risk-free rates.

## Preview

<VectorMotionBlock group="finance" bid="TreasuryYieldCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-treasury-yield-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-treasury-yield-card.tsx" title="Finance Treasury Yield Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'YieldData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "val": {
                "type": "number",
                "optional": false
          }
    }
  },
  invertedLabel: {
    type: 'string' 
  },
  inverted: {
    type: 'boolean' 
  }
}}
/>

## Usage

This component is a demo card displaying treasury yield data with animated visualizations and dark mode support.


# Vendor Payments Card - Accounts Payable



# Finance Vendor Payments Card

The Finance Vendor Payments Card displays upcoming vendor payments and payment history, helping businesses manage their payables efficiently.

## Preview

<VectorMotionBlock group="finance" bid="VendorPaymentsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-vendor-payments-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-vendor-payments-card.tsx" title="Finance Vendor Payments Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  percentage: {
    description: 'The percentage value for display.',
    type: 'string' 
  },
  statusLabel: {
    type: 'string' 
  },
  vendors: {
    type: 'Vendor[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "amount": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'PaymentData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  healthLabel: {
    type: 'string' 
  },
  healthStatus: {
    type: 'string' 
  }
}}
/>

## Usage

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


# Working Capital Card - Operating Capital



# Finance Working Capital Card

The Finance Working Capital Card displays working capital metrics, measuring the company's operational liquidity and short-term financial health.

## Preview

<VectorMotionBlock group="finance" bid="WorkingCapitalCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://www.vectormotion.dev/registry/finance-working-capital-card.json
    ```
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/finance/finance-working-capital-card.tsx" title="Finance Working Capital Card" />
  </Tab>
</Tabs>

## Props

<TypeTable
  type={{
  isInteractive: {
    description: 'Whether the card should have interactive hover effects.',
    type: 'boolean' 
  },
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  assets: {
    type: 'number' 
  },
  liabilities: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CapitalData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          }
    }
  },
  healthStatus: {
    type: 'string' 
  },
  ratioLabel: {
    type: 'string' 
  }
}}
/>

## Usage

This component is a demo card displaying working capital data with animated visualizations and dark mode support.


# Ambulance Status Card - Emergency Services



# Ambulance Status Card

The Ambulance Status Card Monitor ambulance fleet status and availability in real-time.

## Preview

<VectorMotionBlock group="medical" bid="AmbulanceStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/ambulance-status-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/ambulance-status-card.tsx" title="Ambulance Status Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeUnit: {
    type: 'UnitData' 
  },
  availableUnits: {
    type: '{' 
  },
  bls: {
    type: 'number' 
  },
  als: {
    type: 'number' 
  },
  critical: {
    type: 'number' 
  }
}}
/>


# Bed Occupancy Card - Hospital Operations



# Bed Occupancy Card

The Bed Occupancy Card Track hospital bed occupancy rates and availability across different wards.

## Preview

<VectorMotionBlock group="medical" bid="BedOccupancyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/bed-occupancy-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/bed-occupancy-card.tsx" title="Bed Occupancy Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  occupancyRate: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'OccupancyData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Bed Turnover Card - Hospital Efficiency



# Bed Turnover Card

The Bed Turnover Card Monitor bed turnover efficiency metrics and patient flow.

## Preview

<VectorMotionBlock group="medical" bid="BedTurnoverCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/bed-turnover-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/bed-turnover-card.tsx" title="Bed Turnover Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  avgTurnoverTime: {
    type: 'string' 
  },
  trendImprovement: {
    type: 'string' 
  },
  pendingCount: {
    type: 'number' 
  },
  activeCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'TrendData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "minutes": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Blood Bank Inventory Card - Blood Supply



# Blood Bank Inventory Card

The Blood Bank Inventory Card Track blood bank inventory levels by blood type.

## Preview

<VectorMotionBlock group="medical" bid="BloodBankInventoryCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/blood-bank-inventory-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/blood-bank-inventory-card.tsx" title="Blood Bank Inventory Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  items: {
    type: 'InventoryItem[]' ,
    schema: {
          "type": {
                "type": "string",
                "optional": false
          },
          "units": {
                "type": "number",
                "optional": false
          },
          "max": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Chronic Care Card - Patient Management



# Chronic Care Card

The Chronic Care Card Monitor chronic care management program metrics and patient outcomes.

## Preview

<VectorMotionBlock group="medical" bid="ChronicCareCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/chronic-care-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/chronic-care-card.tsx" title="Chronic Care Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  items: {
    type: 'CareItem[]' ,
    schema: {
          "label": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Clinical Trials Card - Research Management



# Clinical Trials Card

The Clinical Trials Card Track clinical trial enrollment, progress, and participant status.

## Preview

<VectorMotionBlock group="medical" bid="ClinicalTrialsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/clinical-trials-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/clinical-trials-card.tsx" title="Clinical Trials Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeCount: {
    type: 'number' 
  },
  closingCount: {
    type: 'number' 
  },
  trials: {
    type: 'TrialData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "progress": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "'active' | 'recruiting' | 'closing' | 'completed'",
                "optional": false
          }
    }
  }
}}
/>


# Coding Accuracy Card - Medical Coding



# Coding Accuracy Card

The Coding Accuracy Card Monitor medical coding accuracy rates and compliance metrics.

## Preview

<VectorMotionBlock group="medical" bid="CodingAccuracyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/coding-accuracy-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/coding-accuracy-card.tsx" title="Coding Accuracy Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  accuracyValue: {
    type: 'number' 
  },
  topQueryName: {
    type: 'string' 
  },
  topQueryCount: {
    type: 'number' 
  },
  reviewedCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'AccuracyData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Cost Per Case Card - Cost Analysis



# Cost Per Case Card

The Cost Per Case Card Track average cost per case across different medical procedures.

## Preview

<VectorMotionBlock group="medical" bid="CostPerCaseCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/cost-per-case-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/cost-per-case-card.tsx" title="Cost Per Case Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentCost: {
    type: 'string' 
  },
  trend: {
    type: 'string' 
  },
  comparisonLabel: {
    type: 'string' 
  },
  comparisonValue: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'CostData[]' ,
    schema: {
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Dialysis Center Card - Renal Care



# Dialysis Center Card

The Dialysis Center Card Monitor dialysis center capacity, patient schedules, and equipment status.

## Preview

<VectorMotionBlock group="medical" bid="DialysisCenterCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/dialysis-center-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/dialysis-center-card.tsx" title="Dialysis Center Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalChairs: {
    type: 'number' 
  },
  activeCount: {
    type: 'number' 
  },
  turnoverCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DialysisData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Dietary Orders Card - Nutrition Management



# Dietary Orders Card

The Dietary Orders Card Track patient dietary orders and nutritional requirements.

## Preview

<VectorMotionBlock group="medical" bid="DietaryOrdersCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/dietary-orders-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/dietary-orders-card.tsx" title="Dietary Orders Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalOrders: {
    type: 'number' 
  },
  pendingAllergens: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'DietaryData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Discharge Planning Card - Care Coordination



# Discharge Planning Card

The Discharge Planning Card Monitor patient discharge planning status and readiness.

## Preview

<VectorMotionBlock group="medical" bid="DischargePlanningCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/discharge-planning-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/discharge-planning-card.tsx" title="Discharge Planning Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  pendingCount: {
    type: 'number' 
  },
  readyCount: {
    description: 'The count of ready items.',
    type: 'number' 
  },
  nextPatient: {
    type: '{' 
  },
  room: {
    type: 'string' 
  },
  name: {
    type: 'string' 
  },
  status: {
    description: 'The status indicator for the component.',
    type: 'string' 
  },
  steps: {
    type: 'PlanningStep[]' ,
    schema: {
          "label": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Emergency Department Card - ED Operations



# Emergency Department Card

The Emergency Department Card Track emergency department patient volume, wait times, and triage status.

## Preview

<VectorMotionBlock group="medical" bid="EmergencyDeptCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/emergency-dept-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/emergency-dept-card.tsx" title="Emergency Department Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentWaitTime: {
    type: 'string' 
  },
  waitStatusLabel: {
    type: 'string' 
  },
  waitingCount: {
    type: 'number' 
  },
  triageCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'WaitTimeData[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "mins": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Equipment Maintenance Card - Facility Management



# Equipment Maintenance Card

The Equipment Maintenance Card Monitor medical equipment maintenance schedules and status.

## Preview

<VectorMotionBlock group="medical" bid="EquipmentMaintenanceCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/equipment-maintenance-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/equipment-maintenance-card.tsx" title="Equipment Maintenance Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  uptimePercentage: {
    type: 'number' 
  },
  activeCount: {
    type: 'number' 
  },
  serviceCount: {
    type: 'number' 
  },
  downCount: {
    type: 'number' 
  },
  alertTitle: {
    type: 'string' 
  },
  alertMessage: {
    description: 'The message content of the alert.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MaintenanceData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Fall Risk Card - Patient Safety



# Fall Risk Card

The Fall Risk Card Track patient fall risk assessments and prevention measures.

## Preview

<VectorMotionBlock group="medical" bid="FallRiskCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/fall-risk-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/fall-risk-card.tsx" title="Fall Risk Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  highRiskCount: {
    type: 'number' 
  },
  precautionsActive: {
    type: 'boolean' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'RiskLevel[]' ,
    schema: {
          "level": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Genetic Testing Card - Genomics



# Genetic Testing Card

The Genetic Testing Card Monitor genetic testing orders, results, and turnaround times.

## Preview

<VectorMotionBlock group="medical" bid="GeneticTestingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/genetic-testing-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/genetic-testing-card.tsx" title="Genetic Testing Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeCount: {
    type: 'number' 
  },
  completedCount: {
    description: 'The count of completed items.',
    type: 'number' 
  },
  panels: {
    type: 'GeneticPanel[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "'processing' | 'completed'",
                "optional": false
          },
          "daysLeft": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Imaging Status Card - Radiology Services



# Imaging Status Card

The Imaging Status Card Track medical imaging orders, scheduling, and completion status.

## Preview

<VectorMotionBlock group="medical" bid="ImagingStatusCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/imaging-status-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/imaging-status-card.tsx" title="Imaging Status Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalScans: {
    type: 'number' 
  },
  activeScanner: {
    type: 'string' 
  },
  activeScannerStatus: {
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ImagingData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Infection Control Card - Healthcare Safety



# Infection Control Card

The Infection Control Card Monitor hospital-acquired infection rates and control measures.

## Preview

<VectorMotionBlock group="medical" bid="InfectionControlCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/infection-control-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/infection-control-card.tsx" title="Infection Control Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  statusItems: {
    type: 'InfectionStatus[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": true
          },
          "isClean": {
                "type": "boolean",
                "optional": false
          }
    }
  },
  historyData: {
    type: 'InfectionHistory[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "cases": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Insurance Denials Card - Claims Management



# Insurance Denials Card

The Insurance Denials Card Track insurance claim denials and appeal status.

## Preview

<VectorMotionBlock group="medical" bid="InsuranceDenialsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/insurance-denials-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/insurance-denials-card.tsx" title="Insurance Denials Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  denialRate: {
    type: 'string' 
  },
  actionableAmount: {
    type: 'string' 
  },
  reasons: {
    type: 'DenialReason[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Insurance Verification Card - Patient Insurance



# Insurance Verification Card

The Insurance Verification Card Monitor insurance verification status for patient admissions.

## Preview

<VectorMotionBlock group="medical" bid="InsuranceVerificationCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/insurance-verification-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/insurance-verification-card.tsx" title="Insurance Verification Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  verifiedCount: {
    description: 'The count of verified items.',
    type: 'number' 
  },
  todayCount: {
    description: 'The count of items from today.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'VerificationData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  },
  coverageItems: {
    description: 'Array of coverage items.',
    type: 'CoverageItem[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "'Verified' | 'Pending'",
                "optional": false
          },
          "colorClass": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Lab Results Card - Laboratory Services



# Lab Results Card

The Lab Results Card Track laboratory test results and turnaround times.

## Preview

<VectorMotionBlock group="medical" bid="LabResultsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/lab-results-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/lab-results-card.tsx" title="Lab Results Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  pendingCount: {
    type: 'number' 
  },
  readyCount: {
    description: 'The count of ready items.',
    type: 'number' 
  },
  alertMessage: {
    description: 'The message content of the alert.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'LabData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Length of Stay Card - Hospital Performance



# Length of Stay Card

The Length of Stay Card Monitor average patient length of stay metrics.

## Preview

<VectorMotionBlock group="medical" bid="LengthOfStayCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/length-of-stay-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/length-of-stay-card.tsx" title="Length of Stay Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  avgLengthOfStay: {
    description: 'The average length of stay.',
    type: 'number' 
  },
  targetGoal: {
    description: 'The target goal value.',
    type: 'number' 
  },
  progressPercentage: {
    type: 'number' 
  }
}}
/>


# Maternity Ward Card - Obstetrics



# Maternity Ward Card

The Maternity Ward Card Track maternity ward occupancy, deliveries, and patient status.

## Preview

<VectorMotionBlock group="medical" bid="MaternityWardCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/maternity-ward-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/maternity-ward-card.tsx" title="Maternity Ward Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  birthCount: {
    description: 'The count of births.',
    type: 'number' 
  },
  todayCount: {
    description: 'The count of items from today.',
    type: 'string' 
  },
  laborActive: {
    description: 'The count of active labor cases.',
    type: 'number' 
  },
  inductionsScheduled: {
    description: 'The count of scheduled inductions.',
    type: 'number' 
  }
}}
/>


# Medical Alerts Card - Clinical Alerts



# Medical Alerts Card

The Medical Alerts Card Display critical medical alerts and patient safety notifications.

## Preview

<VectorMotionBlock group="medical" bid="MedicalAlertsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/medical-alerts-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/medical-alerts-card.tsx" title="Medical Alerts Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  alerts: {
    description: 'Array of alert items.',
    type: 'AlertItem[]' ,
    schema: {
          "type": {
                "type": "'critical' | 'warning' | 'info'",
                "optional": false
          },
          "title": {
                "type": "string",
                "optional": false
          },
          "message": {
                "type": "string",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": true
          },
          "location": {
                "type": "string",
                "optional": true
          }
    }
  }
}}
/>


# Medication Error Card - Medication Safety



# Medication Error Card

The Medication Error Card Track medication error incidents and prevention measures.

## Preview

<VectorMotionBlock group="medical" bid="MedicationErrorCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/medication-error-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/medication-error-card.tsx" title="Medication Error Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  daysSinceLastEvent: {
    description: 'The number of days since last event.',
    type: 'number' 
  },
  previousRecord: {
    description: 'The previous record information.',
    type: 'number' 
  }
}}
/>


# Medication Schedule Card - Pharmacy Operations



# Medication Schedule Card

The Medication Schedule Card Monitor patient medication schedules and administration status.

## Preview

<VectorMotionBlock group="medical" bid="MedicationScheduleCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/medication-schedule-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/medication-schedule-card.tsx" title="Medication Schedule Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  medications: {
    description: 'Array of medication items.',
    type: 'Medication[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "dose": {
                "type": "string",
                "optional": false
          },
          "time": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "'given' | 'due' | 'upcoming'",
                "optional": false
          }
    }
  }
}}
/>


# Mental Health Card - Behavioral Health



# Mental Health Card

The Mental Health Card Track mental health patient assessments and treatment progress.

## Preview

<VectorMotionBlock group="medical" bid="MentalHealthCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/mental-health-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/mental-health-card.tsx" title="Mental Health Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  wellnessScore: {
    description: 'The wellness score value.',
    type: 'number' 
  },
  bedsOccupied: {
    description: 'The count of occupied beds.',
    type: 'string' 
  },
  consults: {
    description: 'Array of consultation items.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MentalHealthData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# No-Show Rate Card - Appointment Analytics



# No Show Rate Card

The No Show Rate Card Monitor patient appointment no-show rates and trends.

## Preview

<VectorMotionBlock group="medical" bid="NoShowRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/no-show-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/no-show-rate-card.tsx" title="No Show Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentRate: {
    description: 'The current rate value.',
    type: 'string' 
  },
  trendValue: {
    description: 'The trend value for analysis.',
    type: 'string' 
  },
  trendLabel: {
    description: 'Label for trend information.',
    type: 'string' 
  },
  primaryReasonLabel: {
    description: 'Label for primary reason.',
    type: 'string' 
  },
  primaryReasonValue: {
    description: 'Value for primary reason.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ReasonData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Oncology Infusion Card - Cancer Treatment



# Oncology Infusion Card

The Oncology Infusion Card Track oncology infusion center schedules and treatment status.

## Preview

<VectorMotionBlock group="medical" bid="OncologyInfusionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/oncology-infusion-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/oncology-infusion-card.tsx" title="Oncology Infusion Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  occupancyRate: {
    type: 'string' 
  },
  pharmacyWaitTime: {
    description: 'The pharmacy wait time in minutes.',
    type: 'string' 
  },
  mixingProgress: {
    description: 'The progress of mixing in percentage.',
    type: 'number' 
  },
  chairs: {
    description: 'Array of chair/infusion station data.',
    type: 'InfusionChair[]' ,
    schema: {
          "id": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "'occupied' | 'available'",
                "optional": false
          }
    }
  }
}}
/>


# Organ Transplant Card - Transplant Services



# Organ Transplant Card

The Organ Transplant Card Monitor organ transplant waitlist and procedure status.

## Preview

<VectorMotionBlock group="medical" bid="OrganTransplantCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/organ-transplant-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/organ-transplant-card.tsx" title="Organ Transplant Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeOffers: {
    description: 'The count of active offers.',
    type: 'number' 
  },
  kidneyWaitlistCount: {
    description: 'The count of kidney waitlist items.',
    type: 'number' 
  },
  liverWaitlistCount: {
    description: 'The count of liver waitlist items.',
    type: 'number' 
  },
  kidneyProgress: {
    description: 'The progress for kidney operations.',
    type: 'number' 
  },
  liverProgress: {
    description: 'The progress for liver operations.',
    type: 'number' 
  }
}}
/>


# Pain Management Card - Patient Care



# Pain Management Card

The Pain Management Card Track patient pain levels and management interventions.

## Preview

<VectorMotionBlock group="medical" bid="PainManagementCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/pain-management-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/pain-management-card.tsx" title="Pain Management Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'PainData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          },
          "iconType": {
                "type": "'Smile' | 'Meh' | 'Frown'",
                "optional": false
          }
    }
  }
}}
/>


# Palliative Care Card - End-of-Life Care



# Palliative Care Card

The Palliative Care Card Monitor palliative care patient status and comfort measures.

## Preview

<VectorMotionBlock group="medical" bid="PalliativeCareCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/palliative-care-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/palliative-care-card.tsx" title="Palliative Care Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activePatients: {
    description: 'The count of active patients.',
    type: 'number' 
  },
  newPatients: {
    description: 'The count of new patients.',
    type: 'number' 
  },
  avgLengthOfStay: {
    description: 'The average length of stay.',
    type: 'string' 
  }
}}
/>


# Pathology Turnaround Card - Pathology Services



# Pathology Turnaround Card

The Pathology Turnaround Card Track pathology specimen processing and result turnaround times.

## Preview

<VectorMotionBlock group="medical" bid="PathologyTurnaroundCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/pathology-turnaround-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/pathology-turnaround-card.tsx" title="Pathology Turnaround Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  avgTurnaroundTime: {
    description: 'The average turnaround time.',
    type: 'number' 
  },
  targetMet: {
    description: 'Whether the target was met.',
    type: 'boolean' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'TurnaroundData[]' ,
    schema: {
          "value": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Patient Admissions Card - Hospital Admissions



# Patient Admissions Card

The Patient Admissions Card Monitor patient admission rates and trends.

## Preview

<VectorMotionBlock group="medical" bid="PatientAdmissionsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/patient-admissions-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/patient-admissions-card.tsx" title="Patient Admissions Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalAdmissions: {
    description: 'The total number of admissions.',
    type: 'number' 
  },
  trendPercentage: {
    description: 'The trend percentage value.',
    type: 'string' 
  },
  trendDirection: {
    description: 'The direction of the trend.',
    type: '\'up\' | \'down\'' 
  },
  trendLabel: {
    description: 'Label for trend information.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'TrendData[]' ,
    schema: {
          "day": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          }
    }
  },
  avatars: {
    description: 'Array of avatar data.',
    type: 'string[]' 
  },
  recentArrivalsCount: {
    description: 'The count of recent arrivals.',
    type: 'number' 
  }
}}
/>


# Patient Satisfaction Card - Quality of Care



# Patient Satisfaction Card

The Patient Satisfaction Card Track patient satisfaction scores and feedback metrics.

## Preview

<VectorMotionBlock group="medical" bid="PatientSatisfactionCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/patient-satisfaction-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/patient-satisfaction-card.tsx" title="Patient Satisfaction Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  npsScore: {
    description: 'The Net Promoter Score value.',
    type: 'number' 
  },
  npsLabel: {
    description: 'Label for NPS.',
    type: 'string' 
  },
  npsTrend: {
    description: 'The NPS trend value.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ReviewData[]' ,
    schema: {
          "score": {
                "type": "number",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Physical Therapy Card - Rehabilitation



# Physical Therapy Card

The Physical Therapy Card Monitor physical therapy sessions, progress, and patient outcomes.

## Preview

<VectorMotionBlock group="medical" bid="PhysicalTherapyCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/physical-therapy-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/physical-therapy-card.tsx" title="Physical Therapy Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  scheduledCount: {
    description: 'The count of scheduled items.',
    type: 'number' 
  },
  dailyGoalPercentage: {
    description: 'The daily goal percentage.',
    type: 'number' 
  },
  patientBreakdown: {
    description: 'Array of patient breakdown data.',
    type: 'string' 
  }
}}
/>


# Provider Productivity Card - Physician Performance



# Provider Productivity Card

The Provider Productivity Card Track healthcare provider productivity metrics and patient volumes.

## Preview

<VectorMotionBlock group="medical" bid="ProviderProductivityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/provider-productivity-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/provider-productivity-card.tsx" title="Provider Productivity Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalRvu: {
    description: 'The total RVU (Relative Value Units) value.',
    type: 'number' 
  },
  targetPercentage: {
    description: 'The target percentage.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ProductivityData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "rvu": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Readmission Rate Card - Patient Outcomes



# Readmission Rate Card

The Readmission Rate Card Monitor 30-day hospital readmission rates.

## Preview

<VectorMotionBlock group="medical" bid="ReadmissionRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/readmission-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/readmission-rate-card.tsx" title="Readmission Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  currentRate: {
    description: 'The current rate value.',
    type: 'string' 
  },
  trendValue: {
    description: 'The trend value for analysis.',
    type: 'string' 
  },
  trendLabel: {
    description: 'Label for trend information.',
    type: 'string' 
  },
  targetRate: {
    description: 'The target rate value.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ReadmissionData[]' ,
    schema: {
          "month": {
                "type": "string",
                "optional": false
          },
          "rate": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Referral Tracker Card - Care Coordination



# Referral Tracker Card

The Referral Tracker Card Track patient referrals and specialist appointment status.

## Preview

<VectorMotionBlock group="medical" bid="ReferralTrackerCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/referral-tracker-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/referral-tracker-card.tsx" title="Referral Tracker Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  inboundCount: {
    description: 'The count of inbound items.',
    type: 'number' 
  },
  outboundCount: {
    description: 'The count of outbound items.',
    type: 'number' 
  },
  pendingCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ReferralData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Remote Monitoring Card - Telehealth



# Remote Monitoring Card

The Remote Monitoring Card Monitor remote patient monitoring data and alerts.

## Preview

<VectorMotionBlock group="medical" bid="RemoteMonitoringCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/remote-monitoring-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/remote-monitoring-card.tsx" title="Remote Monitoring Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeCount: {
    type: 'number' 
  },
  alertCount: {
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'MonitoringData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  },
  waveformColor: {
    description: 'The color of the waveform visualization.',
    type: 'string' 
  }
}}
/>


# Revenue Billing Card - Medical Billing



# Revenue Billing Card

The Revenue Billing Card Track medical billing revenue and collection metrics.

## Preview

<VectorMotionBlock group="medical" bid="RevenueBillingCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/revenue-billing-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/revenue-billing-card.tsx" title="Revenue Billing Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  totalRevenue: {
    type: 'string' 
  },
  revenueGrowth: {
    type: 'string' 
  },
  totalClaimsLabel: {
    description: 'Label for total claims.',
    type: 'string' 
  },
  pendingClaims: {
    description: 'The count of pending claims.',
    type: 'number' 
  },
  avgAR: {
    description: 'The average accounts receivable.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'ClaimsData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "claims": {
                "type": "number",
                "optional": false
          },
          "denied": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>


# Sepsis Protocol Card - Critical Care



# Sepsis Protocol Card

The Sepsis Protocol Card Monitor sepsis screening compliance and protocol adherence.

## Preview

<VectorMotionBlock group="medical" bid="SepsisProtocolCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/sepsis-protocol-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/sepsis-protocol-card.tsx" title="Sepsis Protocol Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  compliancePercentage: {
    description: 'The compliance percentage.',
    type: 'number' 
  },
  complianceLabel: {
    description: 'Label for compliance.',
    type: 'string' 
  },
  bundleName: {
    description: 'The name of the protocol bundle.',
    type: 'string' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'SepsisData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Social Work Card - Social Services



# Social Work Card

The Social Work Card Track social work consultations and patient support services.

## Preview

<VectorMotionBlock group="medical" bid="SocialWorkCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/social-work-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/social-work-card.tsx" title="Social Work Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeCases: {
    description: 'The count of active cases.',
    type: 'number' 
  },
  newCases: {
    description: 'The count of new cases.',
    type: 'number' 
  },
  pendingPlacement: {
    description: 'The count of pending placements.',
    type: 'number' 
  },
  dueAssessments: {
    description: 'The count of due assessments.',
    type: 'number' 
  }
}}
/>


# Staff Availability Card - Staffing Management



# Staff Availability Card

The Staff Availability Card Monitor healthcare staff availability and scheduling.

## Preview

<VectorMotionBlock group="medical" bid="StaffAvailabilityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/staff-availability-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/staff-availability-card.tsx" title="Staff Availability Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  extraStaffCount: {
    description: 'The count of extra staff.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'StaffData[]' ,
    schema: {
          "role": {
                "type": "string",
                "optional": false
          },
          "label": {
                "type": "string",
                "optional": false
          },
          "percent": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          },
          "icon": {
                "type": "LucideIcon",
                "optional": false
          },
          "barColor": {
                "type": "string",
                "optional": false
          },
          "statusColor": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Supply Chain Card - Medical Supplies



# Supply Chain Card

The Supply Chain Card Track medical supply inventory levels and ordering status.

## Preview

<VectorMotionBlock group="medical" bid="SupplyChainCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/supply-chain-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/supply-chain-card.tsx" title="Supply Chain Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  items: {
    type: 'SupplyItem[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "level": {
                "type": "number",
                "optional": false
          },
          "status": {
                "type": "'ok' | 'warning'",
                "optional": false
          }
    }
  },
  deliveryName: {
    description: 'The name of the delivery.',
    type: 'string' 
  },
  deliveryEta: {
    description: 'The estimated arrival time for delivery.',
    type: 'string' 
  }
}}
/>


# Surgical Outcome Card - Surgical Quality



# Surgical Outcome Card

The Surgical Outcome Card Monitor surgical procedure outcomes and complication rates.

## Preview

<VectorMotionBlock group="medical" bid="SurgicalOutcomeCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/surgical-outcome-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/surgical-outcome-card.tsx" title="Surgical Outcome Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  casesCount: {
    description: 'The count of cases.',
    type: 'number' 
  },
  infectionRate: {
    description: 'The infection rate percentage.',
    type: 'string' 
  },
  successRate: {
    description: 'The success rate percentage.',
    type: 'number' 
  },
  data: {
    description: 'Array of data points for the visualization.',
    type: 'OutcomeData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Telemedicine Queue Card - Virtual Care



# Telemedicine Queue Card

The Telemedicine Queue Card Track telemedicine appointment queue and virtual visit status.

## Preview

<VectorMotionBlock group="medical" bid="TelemedicineQueueCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/telemedicine-queue-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/telemedicine-queue-card.tsx" title="Telemedicine Queue Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  activeSession: {
    description: 'The active session information.',
    type: 'ActiveSession' 
  },
  queue: {
    description: 'Array of queue items.',
    type: 'QueueItem[]' ,
    schema: {
          "id": {
                "type": "string",
                "optional": false
          },
          "label": {
                "type": "string",
                "optional": false
          },
          "waitTime": {
                "type": "string",
                "optional": false
          }
    }
  }
}}
/>


# Upcoming Appointments Card - Scheduling



# Upcoming Appointments Card

The Upcoming Appointments Card Display upcoming patient appointments and scheduling.

## Preview

<VectorMotionBlock group="medical" bid="UpcomingAppointmentsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/upcoming-appointments-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/upcoming-appointments-card.tsx" title="Upcoming Appointments Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  appointments: {
    description: 'Array of appointment items.',
    type: 'Appointment[]' ,
    schema: {
          "time": {
                "type": "string",
                "optional": false
          },
          "patient": {
                "type": "string",
                "optional": false
          },
          "type": {
                "type": "string",
                "optional": false
          },
          "status": {
                "type": "string",
                "optional": false
          },
          "icon": {
                "type": "LucideIcon",
                "optional": false
          }
    }
  }
}}
/>


# Vaccination Rate Card - Immunization



# Vaccination Rate Card

The Vaccination Rate Card Monitor patient vaccination compliance rates.

## Preview

<VectorMotionBlock group="medical" bid="VaccinationRateCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/vaccination-rate-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/vaccination-rate-card.tsx" title="Vaccination Rate Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  vaccinations: {
    description: 'Array of vaccination data.',
    type: 'Vaccination[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "percentage": {
                "type": "number",
                "optional": false
          },
          "color": {
                "type": "string",
                "optional": false
          },
          "icon": {
                "type": "React.ReactNode",
                "optional": true
          }
    }
  }
}}
/>


# Vital Signs Card - Patient Monitoring



# Vital Signs Card

The Vital Signs Card Track patient vital signs monitoring and trends.

## Preview

<VectorMotionBlock group="medical" bid="VitalSignsCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/vital-signs-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/vital-signs-card.tsx" title="Vital Signs Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  heartRateData: {
    description: 'Array of heart rate data points.',
    type: 'HeartRateData[]' ,
    schema: {
          "t": {
                "type": "number",
                "optional": false
          },
          "hr": {
                "type": "number",
                "optional": false
          }
    }
  },
  bloodPressureData: {
    description: 'Array of blood pressure data points.',
    type: 'BloodPressureData[]' ,
    schema: {
          "t": {
                "type": "number",
                "optional": false
          },
          "bp": {
                "type": "number",
                "optional": false
          }
    }
  },
  currentHR: {
    description: 'The current heart rate value.',
    type: 'number' 
  },
  currentBP: {
    description: 'The current blood pressure value.',
    type: 'string' 
  }
}}
/>


# Waitlist Capacity Card - Scheduling



# Waitlist Capacity Card

The Waitlist Capacity Card Monitor patient waitlist capacity and scheduling availability.

## Preview

<VectorMotionBlock group="medical" bid="WaitlistCapacityCard" />

## Installation

<Tabs items={['CLI', 'Manual']}>
  <Tab value="CLI">
    `ash
        npx shadcn@latest add https://www.vectormotion.dev/registry/waitlist-capacity-card.json
        `
  </Tab>

  <Tab value="Manual">
    <SourceCode filePath="src/components/vectormotion/blocks/medical/waitlist-capacity-card.tsx" title="Waitlist Capacity Card" />
  </Tab>
</Tabs>

## Usage

This component is a demo card displaying medical metrics with animated visualizations and dark mode support.

<TypeTable
  type={{
  className: {
    description: 'Additional CSS classes to apply to the component.',
    type: 'string' 
  },
  title: {
    description: 'The main title displayed in the block header.',
    type: 'string' 
  },
  subtitle: {
    description: 'The subtitle displayed below the title.',
    type: 'string' 
  },
  capacityData: {
    description: 'Array of capacity data.',
    type: 'CapacityData[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "value": {
                "type": "number",
                "optional": false
          },
          "fill": {
                "type": "string",
                "optional": false
          }
    }
  },
  capacityStatus: {
    description: 'The status of capacity.',
    type: 'string' 
  },
  capacityLabel: {
    description: 'Label for capacity information.',
    type: 'string' 
  },
  departments: {
    description: 'Array of department items.',
    type: 'WaitlistDepartment[]' ,
    schema: {
          "name": {
                "type": "string",
                "optional": false
          },
          "count": {
                "type": "number",
                "optional": false
          }
    }
  }
}}
/>