KPI Cards
Stat cards whose sparkline is a scrubber for the number above it.
$149 once · every Pro piece
Point along a card’s sparkline, or Tab in and use the arrow keys, and its big number and day follow the cursor with rolling digits while the line steps back to half strength around a bright window that springs with you; leave and they fall back to the latest value. The delta pill carries the direction in its glyph and brightness, never green or red, and knows when lower is better. Cards in a row share one focus store, so every crosshair and number moves together. The latest point is a pilot light that breathes while the data is fresh and goes ash when it is stale. Also a dense grid of 32 or more sparklines that share one size observer and one pointer handler with no per-cell runtime, and a table with inline sparklines whose row values roll.
Install
npx shadcn@latest add @obsyde/kpi-cardsNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { KpiRow } from '@/components/obsyde/ember/kpi-cards/KpiCards';
export function Example() {
return (
<KpiRow />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/kpi-cards/KpiCards.tsxcomponentember/kpi-cards/kpi-cards.cssstylesember/kpi-cards/KpiCardsDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/series.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
viewView | 'cards' | 'grid' | 'table' | 'cards' |
kindFirst sparkline | 'area' | 'line' | 'bar' | 'area' |
syncSync crosshairs | boolean | true |
crosshairCrosshair | 'solid' | 'dashed' | 'gradient' | 'none' | 'dashed' |
pilotPilot light | boolean | true |
staleStale card | boolean | false |
liveLive | boolean | false |
cellsGrid cells | number | 32 |
pointsPoints | number | 24 |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 2 |