Block · C-061 · erp

Timeline

An ordered list of events with date, tone and an optional description. It fits order histories, audits or recent activity, and shows its own text when empty.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/timeline.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/timeline.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

It is an ordered list with aria-label; each event keeps its chronological order in the DOM.
time uses an ISO dateTime so the date is machine-readable.
Tone dots are decorative; the event text must describe the change.
The empty state is a paragraph: if it appears after an action, announce it with aria-live.

Read the whole page

Markdown page
Agent index (llms.txt)
Full documentation (llms-full.txt)