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
Loading preview...
Installation
Terminal
$npx shadcn@latest add @vandoko/channel-kpi-stripUsage
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
| Property | Value |
|---|---|
| Source | @vandoko/channel-kpi-strip |
| Curated | 2026-03-30 |
| License | MIT |
| Dependencies | recharts, lucide-react |