Kanshō/Time

Time

A live, self-updating relative timestamp. Renders a static absolute label on the server and first paint (hydration-safe), then ticks — every second under a minute, every minute after. The full timestamp is always in the tooltip and the machine-readable dateTime attribute.

Included in the single kansho full pack. Components are not offered as separate installs.

Relative tiers

Hover any value for the absolute timestamp
Seconds
Minutes
Hours
Older → date

Accepted inputs

Date, ISO string, or epoch ms — all equivalent
Date object: ISO string: Epoch ms:

Component documentation

Time

components/ui/time.tsx

Purpose

Renders a hydration-safe relative time that updates as time passes.

Appropriate use

Use for recent activity timestamps where relative wording aids scanning and the exact value remains available.

Example

components/ui/time.tsx has a representative live example in the "Relative tiers" section on /components/time.

States

Supports second, minute, hour, day, and date tiers and automatically ticks while mounted.

API and props

Time accepts value as Date, ISO string, or epoch milliseconds, optional title, native time props, and ref.

Dependencies

React and the Kansho cn utility.

Accessibility

Renders a semantic time element with machine-readable dateTime and an absolute title.

Limitations

Invalid date input falls back to source text, and locale or timezone formatting is not configurable.

Source

Source: components/ui/time.tsx.

Full pack

components/ui/time.tsx is documented at /components/time and installs only through the single Kansho full pack; no individual component install is offered.