∞ forever components

Business Graphics

KPI Stat Row

Four SaaS metric cards — MRR, active users, churn, net revenue retention — with count-up values, colored delta chips and trend arrows, updating with plausible drift over time.

csslight complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dashboard headers, analytics overview pages, SaaS admin summaries, executive KPI rows.

When not to

When a single hero metric is needed, or exact real-time data wiring — the values here are simulated drift.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the stats array (label, value, delta, sub, fmt) to set your own metrics. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • KPI data (stats array: label, value, delta, goodUp, sub, accent, fmt)
  • drift interval (loop setTimeout 2600ms)
  • count-up duration (DUR=1100)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .ksr-stage
  • IIFE wrapper
  • prefers-reduced-motion early return to the populated state
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Values are simulated drift for demo, not wired to a live data source

kpidashboardmetricsstat-cardsmrrsaascount-updatavizadmin

More Business Graphics components

  • Funnel AnalysisInteractive conversions funnel stage chart with flow particles reacting to mouse hover.
  • Grid MonitorSystem health grid monitoring status of 30 nodes with active scanning sweeps and interactive detail pane.
  • KPI SparklineKPI metric cards featuring interactive, scrubbable sparkline trends on HTML5 canvas with custom tooltip tracking.
  • Activity FeedA live workspace audit stream: new events slide and fade in at the top with a colored initials avatar, an actor, an action (approved invoice, deployed…