Production Line

Manufacturing production line visualization with stations, animated connectors, flow indicators, progress tracking, and performance metrics.

Full Production Line

Preview

ERPlora Assembly Line Alpha Running

Daily Target 742 / 1,000 units

Raw Material Station 1

CNC Machining Station 2

Assembly Station 3

QC Check Station 4

Packaging Station 5

<div class="production-line">
  <div class="production-line-header">
    <h3 class="production-line-title">
      ERPlora Assembly Line Alpha
      <span class="production-line-status-badge production-line-status-badge-running">
        <span class="production-line-status-dot"></span>
        Running
      </span>
    </h3>
  </div>
  <div class="production-line-progress">
    <div class="production-line-progress-header">
      <span class="production-line-progress-label">Daily Target</span>
      <span class="production-line-progress-values">
        <span class="production-line-progress-actual">742</span>
        <span class="production-line-progress-target"> / 1,000 units</span>
      </span>
    </div>
    <div class="production-line-progress-bar">
      <div class="production-line-progress-fill production-line-progress-fill-success" style="width: 74%"></div>
      <div class="production-line-progress-target-marker" style="left: 100%"></div>
    </div>
  </div>
  <div class="production-line-stations">
    <div class="production-line-stations-wrapper">
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M12 12h.01"/></svg>
        </div>
        <span class="production-line-station-label">Raw Material</span>
        <span class="production-line-station-sublabel">Station 1</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4"/></svg>
        </div>
        <span class="production-line-station-label">CNC Machining</span>
        <span class="production-line-station-sublabel">Station 2</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        </div>
        <span class="production-line-station-label">Assembly</span>
        <span class="production-line-station-sublabel">Station 3</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <span class="production-line-station-label">QC Check</span>
        <span class="production-line-station-sublabel">Station 4</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
        </div>
        <span class="production-line-station-label">Packaging</span>
        <span class="production-line-station-sublabel">Station 5</span>
      </div>
    </div>
  </div>
  <div class="production-line-footer">
    <div class="production-line-footer-info">
      <div class="production-line-speed">
        <span class="production-line-speed-label">Line Speed</span>
        <span class="production-line-speed-value">85%</span>
        <div class="production-line-speed-bar">
          <div class="production-line-speed-fill" style="width: 85%"></div>
        </div>
      </div>
    </div>
    <span class="production-line-last-update">Updated 15s ago</span>
  </div>
</div>

Requires: ux.min.css

<div class="relative p-6 bg-base-100 border border-base-300 rounded-box">
  <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
    <h3 class="text-lg font-semibold m-0 flex items-center gap-2">
      ERPlora Assembly Line Alpha
      <span class="inline-flex items-center gap-1 text-xs font-medium rounded-full py-1 px-3 bg-success/15 text-success">
        <span class="w-2 h-2 rounded-full bg-current animate-pulse"></span>
        Running
      </span>
    </h3>
  </div>
  <div class="mb-6">
    <div class="flex justify-between text-sm mb-1"><span class="text-base-content/60">Daily Target</span><span class="font-medium tabular-nums"><span>742</span><span class="text-base-content/40"> / 1,000 units</span></span></div>
    <div class="relative h-2 bg-base-200 rounded-full overflow-hidden"><div class="h-full bg-success rounded-full" style="width: 74%"></div></div>
  </div>
  <div class="flex items-start justify-between py-6 overflow-x-auto">
    <div class="flex items-start justify-between min-w-full gap-2">
      <!-- Station 1 -->
      <div class="flex flex-col items-center flex-1 min-w-20 max-w-37.5">
        <div class="flex items-center justify-center w-16 h-16 rounded-box bg-success/15 border-2 border-success text-success"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M12 12h.01"/></svg></div>
        <span class="text-xs font-medium text-center mt-2">Raw Material</span>
        <span class="text-center text-[0.625rem] text-base-content/40 mt-0.5">Station 1</span>
      </div>
      <!-- Connector -->
      <div class="relative flex-1 h-1 bg-base-200 rounded-full overflow-hidden" style="margin-top: 30px; min-width: 20px;">
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-success to-transparent bg-[length:200%_100%] animate-[flow_2s_linear_infinite]"></div>
      </div>
      <!-- Station 2-5 same pattern... -->
      <div class="flex flex-col items-center flex-1 min-w-20 max-w-37.5">
        <div class="flex items-center justify-center w-16 h-16 rounded-box bg-success/15 border-2 border-success text-success"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></div>
        <span class="text-xs font-medium text-center mt-2">CNC Machining</span>
        <span class="text-center text-[0.625rem] text-base-content/40 mt-0.5">Station 2</span>
      </div>
      <div class="relative flex-1 h-1 bg-base-200 rounded-full overflow-hidden" style="margin-top: 30px; min-width: 20px;"><div class="absolute inset-0 bg-gradient-to-r from-transparent via-success to-transparent bg-[length:200%_100%] animate-[flow_2s_linear_infinite]"></div></div>
      <div class="flex flex-col items-center flex-1 min-w-20 max-w-37.5">
        <div class="flex items-center justify-center w-16 h-16 rounded-box bg-success/15 border-2 border-success text-success"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77"/></svg></div>
        <span class="text-xs font-medium text-center mt-2">Assembly</span>
        <span class="text-center text-[0.625rem] text-base-content/40 mt-0.5">Station 3</span>
      </div>
    </div>
  </div>
  <div class="flex items-center justify-between flex-wrap gap-4 mt-6 pt-4 border-t border-base-300">
    <div class="flex items-center gap-2 text-sm py-2 px-4 bg-base-200 rounded-field"><span class="text-base-content/60">Line Speed</span><span class="font-semibold tabular-nums">85%</span><div class="w-15 h-1 bg-base-300 rounded-full overflow-hidden"><div class="h-full bg-primary rounded-full" style="width: 85%"></div></div></div>
    <span class="text-xs text-base-content/40">Updated 15s ago</span>
  </div>
</div>

Requires: tw.min.css

// Animate flow connectors — already handled by CSS @keyframes flow-animation.
// To stop flow on a connector (e.g., when station is down):
// connector.classList.add('production-line-connector-inactive');
// connector.classList.remove('production-line-connector-active');

Station with Error and Tooltip

Preview

ERPlora Line Bravo Error

Cutting OK

Welding ERROR

QC Waiting

Shipping Waiting

<div class="production-line">
  <div class="production-line-header">
    <h3 class="production-line-title">
      ERPlora Line Bravo
      <span class="production-line-status-badge production-line-status-badge-error">
        <span class="production-line-status-dot"></span>
        Error
      </span>
    </h3>
  </div>
  <div class="production-line-stations">
    <div class="production-line-stations-wrapper">
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/></svg>
        </div>
        <span class="production-line-station-label">Cutting</span>
        <span class="production-line-station-sublabel">OK</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-error">
        <div class="production-line-station-icon">
          <span class="production-line-station-alert">!</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06"/></svg>
        </div>
        <span class="production-line-station-label">Welding</span>
        <span class="production-line-station-sublabel">ERROR</span>
        <div class="production-line-station-tooltip">
          <div class="production-line-tooltip-row">
            <span class="production-line-tooltip-label">Status</span>
            <span class="production-line-tooltip-value">Overtemp</span>
          </div>
          <div class="production-line-tooltip-row">
            <span class="production-line-tooltip-label">Down Since</span>
            <span class="production-line-tooltip-value">14:32</span>
          </div>
          <div class="production-line-tooltip-row">
            <span class="production-line-tooltip-label">Cycle Count</span>
            <span class="production-line-tooltip-value">1,204</span>
          </div>
        </div>
      </div>
      <div class="production-line-connector production-line-connector-inactive">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-stopped">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <span class="production-line-station-label">QC</span>
        <span class="production-line-station-sublabel">Waiting</span>
      </div>
      <div class="production-line-connector production-line-connector-inactive">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-stopped">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/></svg>
        </div>
        <span class="production-line-station-label">Shipping</span>
        <span class="production-line-station-sublabel">Waiting</span>
      </div>
    </div>
  </div>
  <div class="production-line-footer">
    <div class="production-line-footer-info">
      <div class="production-line-downtime">
        <svg class="production-line-downtime-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        <span>Downtime:</span>
        <span class="production-line-downtime-value">28m</span>
      </div>
    </div>
    <span class="production-line-last-update">Updated 5s ago</span>
  </div>
</div>

Requires: ux.min.css

<!-- Use .production-line-station-error for error state (pulsing red border).
     Add .production-line-station-alert badge for alert count.
     Use .production-line-connector-inactive to stop flow animation on downstream connectors. -->

Requires: tw.min.css

// Hover over the error station to see the tooltip with details.
// Tooltips appear automatically on hover via CSS — no JS needed.

With Metrics Bar

Preview

ERPlora Line Charlie

Running

Output 1,842 units +12%

Yield Rate 97.4 % +0.8%

Cycle Time 42 sec +3s

Scrap Rate 2.1 % -0.4%

Forming

Finishing

Inspection Calibrating

<div class="production-line">
  <div class="production-line-header">
    <h3 class="production-line-title">ERPlora Line Charlie</h3>
    <span class="production-line-status-badge production-line-status-badge-running">
      <span class="production-line-status-dot"></span>
      Running
    </span>
  </div>
  <div class="production-line-metrics">
    <div class="production-line-metric">
      <span class="production-line-metric-label">Output</span>
      <span class="production-line-metric-value">
        1,842
        <span class="production-line-metric-unit">units</span>
      </span>
      <span class="production-line-metric-trend production-line-metric-trend-up">+12%</span>
    </div>
    <div class="production-line-metric">
      <span class="production-line-metric-label">Yield Rate</span>
      <span class="production-line-metric-value">
        97.4
        <span class="production-line-metric-unit">%</span>
      </span>
      <span class="production-line-metric-trend production-line-metric-trend-up">+0.8%</span>
    </div>
    <div class="production-line-metric">
      <span class="production-line-metric-label">Cycle Time</span>
      <span class="production-line-metric-value">
        42
        <span class="production-line-metric-unit">sec</span>
      </span>
      <span class="production-line-metric-trend production-line-metric-trend-down">+3s</span>
    </div>
    <div class="production-line-metric">
      <span class="production-line-metric-label">Scrap Rate</span>
      <span class="production-line-metric-value">
        2.1
        <span class="production-line-metric-unit">%</span>
      </span>
      <span class="production-line-metric-trend production-line-metric-trend-up">-0.4%</span>
    </div>
  </div>
  <div class="production-line-stations">
    <div class="production-line-stations-wrapper">
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/></svg>
        </div>
        <span class="production-line-station-label">Forming</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0"/></svg>
        </div>
        <span class="production-line-station-label">Finishing</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-maintenance">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <span class="production-line-station-label">Inspection</span>
        <span class="production-line-station-sublabel">Calibrating</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Use .production-line-metrics for a metrics bar with trend indicators.
     .production-line-metric-trend-up (green) and .production-line-metric-trend-down (red) show directional trends. -->

Requires: tw.min.css

// Update metric values dynamically
function updateMetric(lineEl, label, value, unit) {
  const metrics = lineEl.querySelectorAll('.production-line-metric');
  metrics.forEach(m => {
    if (m.querySelector('.production-line-metric-label').textContent === label) {
      m.querySelector('.production-line-metric-value').innerHTML =
        value + '<span class="production-line-metric-unit">' + unit + '</span>';
    }
  });
}

Compact Variant

Preview

ERPlora Mini Line D

Running

Input

Process

Output

<div class="production-line production-line-compact production-line-sm">
  <div class="production-line-header">
    <h3 class="production-line-title">ERPlora Mini Line D</h3>
    <span class="production-line-status-badge production-line-status-badge-running">
      <span class="production-line-status-dot"></span>
      Running
    </span>
  </div>
  <div class="production-line-stations">
    <div class="production-line-stations-wrapper">
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="6" width="20" height="12" rx="2"/></svg>
        </div>
        <span class="production-line-station-label">Input</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>
        </div>
        <span class="production-line-station-label">Process</span>
      </div>
      <div class="production-line-connector production-line-connector-active">
        <div class="production-line-connector-flow"></div>
      </div>
      <div class="production-line-station production-line-station-running">
        <div class="production-line-station-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/></svg>
        </div>
        <span class="production-line-station-label">Output</span>
      </div>
    </div>
  </div>
  <div class="production-line-footer">
    <div class="production-line-footer-info">
      <div class="production-line-speed">
        <span class="production-line-speed-label">Speed</span>
        <span class="production-line-speed-value">100%</span>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Compact variant hides the metrics and progress sections.
     Combine with .production-line-sm for smaller station icons (48px instead of 64px). -->

Requires: tw.min.css

// No JS needed — compact is a CSS-only variant.
// .production-line-compact hides metrics and progress.
// .production-line-sm reduces station icon sizes.

Classes Reference

Class	Description
`.production-line`	Main container with border and padding
`.production-line-header`	Header with title and status badge
`.production-line-title`	Line name heading
`.production-line-status-badge`	Status badge pill
`.production-line-status-badge-running`	Running status (green with pulse dot)
`.production-line-status-badge-stopped`	Stopped status (muted)
`.production-line-status-badge-maintenance`	Maintenance status (yellow)
`.production-line-status-badge-error`	Error status (red)
`.production-line-metrics`	Metrics bar with KPIs
`.production-line-metric`	Single metric with label, value, and trend
`.production-line-metric-trend-up`	Positive trend (green)
`.production-line-metric-trend-down`	Negative trend (red)
`.production-line-progress`	Progress bar section (target vs actual)
`.production-line-progress-fill-success`	Green progress fill
`.production-line-progress-fill-warning`	Yellow progress fill
`.production-line-progress-fill-danger`	Red progress fill
`.production-line-progress-target-marker`	Target line marker on progress bar
`.production-line-stations`	Scrollable stations container
`.production-line-station`	Single station node
`.production-line-station-running`	Running station (green border and icon)
`.production-line-station-stopped`	Stopped station (muted)
`.production-line-station-maintenance`	Maintenance station (yellow)
`.production-line-station-error`	Error station (red with pulse shadow)
`.production-line-station-alert`	Alert badge on station icon (red circle)
`.production-line-station-tooltip`	Hover tooltip with station details
`.production-line-connector`	Line connecting two stations
`.production-line-connector-active`	Active connector with flow animation
`.production-line-connector-inactive`	Inactive connector (no flow)
`.production-line-speed`	Speed indicator with bar
`.production-line-downtime`	Downtime alert strip (red)
`.production-line-compact`	Compact variant (hides metrics and progress)
`.production-line-sm`	Small station icons (48px)
`.production-line-lg`	Large station icons (80px)
`.production-line-vertical`	Vertical layout (stations stacked top-to-bottom)
`.production-line.glass`	Glass morphism variant