ActivityTimeline

A stable chronological list with complete, current, upcoming, and error states encoded by text and shape.@gemologic/sheen · data display

Playground

density

ApprovedCompleted
2:00 PM
DeployingCurrent

<ActivityTimeline label="Deployment activity" items={[{ id: "approved", title: "Approved", state: "completed", timestamp: "2026-09-08T18:00:00Z", timeLabel: "2:00 PM" }, { id: "deploying", title: "Deploying", state: "current" }]}  density="default"/>

Variant matrix

Deployment activity

ApprovedCompleted
2:00 PM
DeployingCurrent

density: compact

ApprovedCompleted
2:00 PM
DeployingCurrent

density: default

ApprovedCompleted
2:00 PM
DeployingCurrent

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/ActivityTimeline.tsx

Tokens

--sheen-color-border-control
--sheen-color-accent-subtle
--sheen-color-success-subtle
--sheen-color-danger-subtle

Accessibility

Role: ordered list of article entriesKeyboard: No component-owned keys

Do

Keep item IDs stable across refresh and provide a display label with every machine timestamp.

Do not

Do not rely on marker color alone; the visible state label is part of the contract.

Generated props

Name	Type	Default	Description
`ref`	`HTMLOListElement \| ((element: HTMLOListElement) => void)`	—	Native ordered-list reference.
`label` *	`string`	—	Required accessible timeline name.
`items` *	`readonly ActivityTimelineItem[]`	—	Stable-ID chronological records with visible state, optional description/actor, and paired machine/display time.
`density`	`"compact" \| "default"`	`default`	Default or compact vertical rhythm.
`refreshing`	`boolean`	`false`	Marks accepted items busy without replacing or dimming them.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.