Activity Timeline
NewPro
A vertical feed whose line draws itself as you scroll, popping each node as the tip reaches it.
Customize
Draw on
Timestamps
#ff784f
36px
Stay lit
When to use it
- Audit logs and project history in admin dashboards
- Order or delivery tracking with a status for each step
- Company milestones and changelogs on marketing pages
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 298
Installation
Activity Timeline is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy activity-timeline.tsx into components/ui and run npm install motion.
Usage
import { ActivityTimeline } from "@/components/ui/activity-timeline";
<ActivityTimeline
events={[
{ id: "1", title: "Mia deployed v2.4.0", description: "Production, 1m 42s", time: "2h ago", icon: <RocketIcon /> },
{ id: "2", title: "Kenji merged #482", time: "5h ago", icon: <MergeIcon /> },
]}
/>Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| events | TimelineEvent[] | — | Events in order: { id, title, description?, time?, icon?, color?, content? }. |
| draw | "scroll" | "view" | "scroll" | Tie the line to the scroll position, or draw it once when the list comes into view. |
| color | string | "#ff784f" | Color of the drawn line and the nodes. |
| trackColor | string | "#2d2824" | Color of the line before it is drawn. |
| nodeSize | number | 36 | Node diameter in pixels. |
| timestamps | "inline" | "side" | "inline" | The time beside the title, or in its own column left of the line. |
| anchor | number | 0.7 | Where the tip of the line sits in the scroll area, from 0 (top) to 1 (bottom). |
| duration | number | 1.8 | Seconds to draw the line when draw is view. |
| once | boolean | false | Keep events lit after they are reached, even if the line retracts when scrolling back up. |
| scrollContainerRef | RefObject<HTMLElement | null> | — | The element that scrolls. Defaults to the page. |
| label | string | "Activity" | Accessible name of the list. |
| className | string | — | Extra classes for the list. |
Dependencies: motion