Live indicator

Free

Whether a feed is live, in words and a dot. The dot sends out a soft ring only while live, blinks while reconnecting and rests otherwise.

Installs components/ui/live-indicator.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/live-indicator.json

Live3 viewersStreaming logs

When to use #

Use it for

Live dashboards, logs, streams, presence.
Telling people whether what they see is current.

Skip it when

Saved state; use the sync status.
Decorative 'online' dots with no connection behind them.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/live-indicator.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { LiveIndicator, type LiveState } from "@/components/ui/live-indicator"
import { SegmentedControl } from "@/components/ui/segmented-control"

export function LiveIndicatorDemo() {
  const [state, setState] = useState<LiveState>("live");
  return (
    <div className="grid w-full max-w-lg gap-5">
      <SegmentedControl className="justify-self-start" label="Connection" value={state} onValueChange={(v) => setState(v as LiveState)} options={[{ value: "live", label: "Live" }, { value: "reconnecting", label: "Reconnecting" }, { value: "paused", label: "Paused" }, { value: "offline", label: "Offline" }]} />
      <div className="flex flex-wrap items-center gap-6">
        <LiveIndicator state={state} detail={state === "live" ? "3 viewers" : state === "offline" ? "last update 4 min ago" : undefined} />
        <LiveIndicator state={state} label={state === "live" ? "Streaming logs" : undefined} />
      </div>
    </div>
  );
}

API reference #

LiveIndicator

component

PropTypeDefaultDescription

state *LiveState—

labelstring—Replaces the state word, e.g. "Streaming".

detailstring—Secondary text, e.g. "updated 4s ago" or "3 viewers".

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.