Components

Channel KPI Strip

Horizontal row of 6 KPI cards with sparklines, trend arrows, and pulse indicators.

Channel KPI Strip

Responsive grid of KPI cards — one per channel — each showing a metric value, sparkline trend chart, trend direction arrow, and a real-time pulse indicator dot.

Preview
Open in
Loading preview...

Installation

Terminal
$npx shadcn@latest add @vandoko/channel-kpi-strip

Usage

import { ChannelKpiStrip } from "@/components/channel-kpi-strip";
import { Globe, Users } from "lucide-react";

export default function Dashboard() {
  return (
    <ChannelKpiStrip
      channels={[
        {
          name: "Web",
          icon: <Globe className="h-4 w-4" />,
          value: "3,241",
          trend: "up",
          trendValue: "+12.3%",
          sparkline: [20, 25, 22, 30, 28, 35, 32, 40],
        },
        {
          name: "Social",
          icon: <Users className="h-4 w-4" />,
          value: "1,847",
          trend: "up",
          trendValue: "+8.1%",
          sparkline: [15, 18, 16, 20, 22, 19, 24, 26],
        },
      ]}
    />
  );
}

Features

  • 6-column responsive grid — 2 cols mobile, 3 tablet, 6 desktop
  • Sparkline — Recharts LineChart per channel, no animation for real-time perf
  • Trend arrows — Green up, red down, muted flat with percentage
  • Pulse dot — Animated CSS pulse indicating live data connection
  • Glassmorphism — backdrop-blur card backgrounds with border glow on hover

Lineage

PropertyValue
Source@vandoko/channel-kpi-strip
Curated2026-03-30
LicenseMIT
Dependenciesrecharts, lucide-react

On this page