Live Ticker Stats

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/stats/stats16.tsx instead.

Usage

The file also exports stats16Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Stats16, stats16Demo } from "@/components/blocks/stats/stats16";

export default function Page() {
  return <Stats16 {...stats16Demo} />;
}

Props

Types

type TickerStat = {
  label: string;
  initialValue: number;
  /** Fixed amount added to this stat on every tick interval. Never randomized. */
  tickAmount: number;
  suffix?: string;
};

Behavior notes

• This is a simulated live feed only: numbers tick up by each stat's fixed tickAmount every tickIntervalMs via a real setInterval started on mount, purely for visual effect, not connected to any real data source.
• Ticking never stops on its own while the block stays mounted; the interval is cleared on unmount to avoid a memory leak, but there is no cap or 'freeze after N ticks' behavior.
• Initial render always shows each stat's initialValue (identical on server and client) so there is no hydration mismatch; the first increment only happens after the first tickIntervalMs elapses client-side.
• All increments are fixed values from props, never Math.random() or Date.now()/new Date(), so repeated static renders (e.g. card thumbnails) start from the same numbers.
• The pulsing dot indicator (animate-pulse-style ping + solid dot, bg-primary) is purely decorative and does not reflect any real connection status.