Analytics Surface Data Card
A demonstrative analytics-surface metrics panel with a balance HUD figure, an inline SVG sparkline, and a compact signal table of colored deltas and row sparklines on a dot-matrix textured card with a cyan gradient top-border.
A live-feeling metrics panel that demonstrates Vandoko's analytics surface: a large balance HUD figure with a colored delta and inline SVG sparkline, above a compact signal table of labels, values, +/- deltas, and tiny per-row sparklines. Cyan is the lone signal — the active row and the HUD figure — on a dot-matrix textured card with a gradient top-border accent. All copy and data are overridable via props.
npx shadcn@latest add @vandoko/vkb-feat-26Usage
import { VkbFeat26 } from "@/registry/new-york/blocks/vkb-feat-26/vkb-feat-26";
export default function Page() {
return <VkbFeat26 />;
}Pass signals to drive the table rows. Each signal takes a label, a formatted value, a delta, a direction of "up" or "down" (which colors the delta green via var(--chart-2) or red via var(--chart-5)), a normalized spark array of 6 points in the 0..1 range, and an optional active flag that marks the lone cyan signal row.
Related Components
Editorial Feature Statement
A type-led editorial feature section: a single sub-display positioning statement with a lone cyan signal phrase, generous left-aligned space, and one supporting detail row of oversized numerals that count up on view.
Tabbed HUD Control Surface
A tabbed instrument-panel feature section where each tab swaps in a different live demonstrative instrument — radial ring gauges, a team network graph, and a telemetry bento — on one dark dot-matrix control surface with gradient borders and a single cyan signal.