Skip to content

Timer

GraphTimer

Elapsed time, how long ago, or the time of day. The numbers update every second.

Good for uptime, last deploy, or a clock in the corner. Time left until a date is Countdown. A static number is Stat.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-timer.json

Incident

Counts up from a start time.

[ INCIDENT ]

00:00:00

api

timer

Last deploy

How long since the last deploy.

[ SHIPPED ]

0s ago

last deploy

timer

Local

The time of day, updating every second.

[ LOCAL ]

00:00:00

timer

Props

PropTypeDefaultDescription
titlestringCaption drawn on the top edge of the frame.
kind"elapsed" | "ago" | "clock""elapsed"elapsed counts up from at. ago is relative. clock is the time of day.
atDate | number | stringStart time for elapsed and ago. A date, timestamp, or ISO string.
captionstringLine under the number.
palette"mono" | "duo" | "multi""mono"mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents.
cornerstring"+"Character at each corner of the frame.
classNamestringPassed to the outer frame.