ComponentsData display

Activity timeline

Chronological, human-readable history: dashboard activity, record history, approval and order steps. Groups by day ("Today", "Yesterday", "Friday, Nov 6"), shows relative times that stay fresh from one shared ticker, and renders people as Avatars and events as icons.

Native <ol> + Intl.RelativeTimeFormat components/activity-timeline.tsx, lib/data-islands.tsx, styles/data.csstheme · material · accent · density · font

Activity

New submission on Contact form
11/12/26, 8:45 PM
Ahmet K. commented on “QR menus guide”
11/12/26, 8:11 PM
12 images uploaded to Media
11/12/26, 6:47 PM
Meltem scheduled a post
11/12/26, 3:49 PM

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ActivityTimeline } from "@vamos-ui/react";
import { Inbox } from "lucide-react";

<ActivityTimeline groupBy="day" items={[
  { id: "1", at: "2026-11-10T09:12:00Z", icon: Inbox, title: <>New submission on <b>Contact form</b></> },
  { id: "2", at: "2026-11-09T16:40:00Z", avatar: { name: "Ahmet Kaya" }, actor: "Ahmet Kaya", title: "commented on “QR menus guide”" },
]} />

Examples

Grouped by day (CRM)

groupBy="day" splits in timeZone (pass your LocaleProvider's); inside groups times show the time of day.

Northwind renewal

Record history

Thursday, Nov 12
1. Ayşe Kaya moved the deal to Negotiation
  7:49 PM
2. Proposal v3 opened by the client (2nd time)
  5:49 PM
Wednesday, Nov 11
1. Call with Burak Şen · 18 min
  6:49 PM
2. Deal value changed to $48,500
  2:49 PM
Sunday, Nov 8
1. Owner changed from Can Özkan to Ayşe Kaya
  6:49 PM

Steps

variant="steps": done / current / upcoming / failed, aria-current="step" and status text for screen readers.

Quote Q-2026-118

Harbor & Pine · loyalty app

Completed
Quote sent
11/2/26, 9:30 AM
Completed
Opened by client
11/4/26, 2:10 PM
Current step
Waiting for scope decision
11/5/26, 10:00 AM
Native apps or web app first? Native adds two weeks.
Upcoming
Deposit invoice
Upcoming
Kick-off

Notes and comments

body holds a note or quote; actions add buttons under it.

Notes & comments

Meltem Aydın left a note
11/12/26, 8:37 PM
Client prefers WhatsApp over email. Best time to call is after 14:00.
İlker Şahin commented on “Local SEO checklist for 2026”
11/12/26, 7:14 PM
Can we add a section about Google Business Profile posts? Half our calls ask about it.
Reminder: renew harborpine.com before Nov 19
11/12/26, 2:29 PM

Live feed

New events wait behind a "3 new updates" pill instead of shifting the list; announcement is a polite live region you batch.

Store activity

New events wait above the list

Order #10482 paid · $124.00
11/12/26, 8:44 PM

Paginated history with filters

hasMore + onLoadMore show a busy load button; filter renders chips above the list.

Revision history

“A practical guide to QR menus”

Thursday, Nov 12
1. Samet published the post
  9:00 AM
Wednesday, Nov 11
1. Ece edited the introduction
  4:00 PM
2. Ece changed the featured image
  11:00 AM

API

ActivityTimeline

Prop	Type	Default
`items` Events.	`TimelineEntry[]`	`—`
`variant` Event feed or process steps.	`"feed" \| "steps"`	`"feed"`
`groupBy` Day sections.	`"day" \| "none"`	`"none"`
`order` Sort by time.	`"desc" \| "asc"`	`"desc" (steps: as given)`
`timeZone` Day boundaries for grouping.	`string`	`"UTC"`
`now` Pin the reference time (docs, tests).	`Date \| string \| number`	`—`
`timeMode` Default: relative, time of day inside groups.	`"relative" \| "absolute"`	`—`
`density` Indicator size and spacing.	`"inherit" \| "compact" \| "comfortable"`	`"inherit"`
`loading` Three skeleton items.	`boolean`	`false`
`empty` Empty state.	`ReactNode`	`"No activity yet"`
`hasMore / onLoadMore` Load-more button with busy state.	`boolean / () => void \| Promise<void>`	`—`
`newCount / onShowNew` "3 new updates" pill for live feeds.	`number / () => void`	`—`
`announcement` Polite live-region text.	`string`	`—`
`filter` Chips above the list.	`ReactNode`	`—`
`labels` today, yesterday, empty, loadMore, loading, newItems, done, current, upcoming, failed.	`Partial<TimelineLabels>`	`—`

TimelineEntry

Prop	Type	Default
`id / at` Key and time (ISO instant or YYYY-MM-DD).	`string / Date \| string`	`—`
`title / body` What happened; note under it.	`ReactNode`	`—`
`icon` Indicator icon.	`LucideIcon`	`—`
`avatar` Actor's Avatar (wins over icon).	`{ src?: string; name: string }`	`—`
`actor` Bold name before the title.	`string`	`—`
`tone` Indicator tint.	`"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"`	`—`
`href` Title links to the record.	`string`	`—`
`status` Steps state.	`"done" \| "current" \| "upcoming" \| "failed"`	`—`
`actions` Buttons under the content.	`ReactNode`	`—`

Parts

Prop	Type	Default
`Timeline` The <ol>.	`variant, density`	`—`
`TimelineGroup` Day section with a heading.	`date \| label, now`	`—`
`TimelineItem` One <li>; highlight briefly tints a new item (not under reduced motion).	`status, highlight`	`—`
`TimelineIndicator` Opaque dot on the connector.	`icon \| avatar \| status, tone`	`—`
`TimelineContent / TimelineTitle / TimelineBody / TimelineActions` Text column parts.	`HTMLAttributes`	`—`
`TimelineBody variant` card: note on an inset surface. plain: unstyled text for typographic layouts.	`"card" \| "plain"`	`"card"`
`TimelineTime` <time> with relative text and the full date as title.	`value, now, mode`	`—`
`TimelineNewItems / TimelineSkeleton` Live pill and loading rows.	`count / count`	`—`
`RelativeTime` Standalone relative <time> (SSR shows absolute, client upgrades).	`value, now, display, styleType`	`—`

Accordion

Address field