Components

ICP Alignment Gauge

Composite ICP alignment dashboard for dealer OEM teams with demographic, vehicle, and behavior scoring.

ICP Alignment Gauge

Composite ICP alignment card designed for automotive dealership management teams. Shows an overall weighted alignment score with breakdowns across three categories: Demographic (Age, Income, Education), Vehicle Alignment (Segment, Price, Financing), and Behavior (Cycle, Affinity, Channels).

Preview
Open in
Loading preview...

Installation

Terminal
$npx shadcn@latest add @vandoko/icp-alignment-gauge

Usage

import { IcpAlignmentGauge } from "@/components/icp-alignment-gauge";

export default function Dashboard() {
  return (
    <IcpAlignmentGauge
      oemName="Toyota"
      overall={87}
      demographic={[
        { label: "Age", sublabel: "25-54 prime", score: 92 },
        { label: "Income", sublabel: "$65k-$120k", score: 85 },
        { label: "Education", sublabel: "College+", score: 78 },
      ]}
      vehicle={[
        { label: "Segment", sublabel: "Midsize SUV", score: 94 },
        { label: "Price", sublabel: "$32k-$45k", score: 88 },
        { label: "Financing", sublabel: "60mo avg", score: 76 },
      ]}
      behavior={[
        { label: "Cycle", sublabel: "3-5yr", score: 90 },
        { label: "Affinity", sublabel: "Brand loyal", score: 82 },
        { label: "Channels", sublabel: "Digital-first", score: 85 },
      ]}
    />
  );
}

Features

  • Overall gauge — Circular SVG with animated stroke, shows weighted composite score (0-100)
  • Three category sections — Demographic, Vehicle Alignment, Behavior with progress bars per metric
  • Color-coded thresholds — Cyan (strong 80+), azure (moderate 50-79), muted (weak below 50)
  • Uses theme tokens — Colors reference --chart-1, --chart-2 CSS variables from vandoko-theme
  • Sublabels — Optional context per metric (e.g., "25-54 prime", "$65k-$120k")
  • Configurable thresholds — Default 80/50, customizable per OEM

Categories

CategoryMetricsWhat It Measures
DemographicAge, Income, EducationHow well the local population matches the OEM's buyer profile
VehicleSegment, Price, FinancingAlignment between OEM inventory and market demand
BehaviorCycle, Affinity, ChannelsPurchase behavior patterns vs OEM customer base

Lineage

PropertyValue
Source@vandoko/icp-alignment-gauge
Curated2026-03-30
LicenseMIT
DependenciesNone

On this page