Timeline
Activity timeline.
import { Timeline } from "@/registry/new-york/items/manpowerhub-timeline/components/timeline";export function ManpowerhubTimelineBasic() { return ( <div className="w-full max-w-sm rounded-lg border border-border bg-card p-4"> <Timeline items={[ { title: "Deployed to Site Alpha", subtitle: "Planning Agent · 2h ago", }, { title: "Medical renewal flagged", subtitle: "Compliance Agent · 1d ago", dotColor: "var(--amber)", }, { title: "Timesheet approved", subtitle: "HR Manager · 3d ago", dotColor: "var(--text-3)", }, ]} /> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/timeline.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
export interface TimelineItem { title: React.ReactNode; subtitle?: React.ReactNode; dotColor?: string;}
function Timeline({ className, items, ...props}: React.ComponentProps<"div"> & { items: TimelineItem[] }) { return ( <div data-slot="timeline" className={cn("flex flex-col", className)} {...props} > {items.map((item, i) => ( <TimelineItemRow key={i} item={item} isLast={i === items.length - 1} /> ))} </div> );}
function TimelineItemRow({ item, isLast,}: { item: TimelineItem; isLast: boolean;}) { return ( <div className="flex gap-2.5 pb-3.5"> <div className="flex flex-col items-center"> <div className="mt-1 size-[7px] shrink-0 rounded-full bg-[var(--brand)]" style={item.dotColor ? { background: item.dotColor } : undefined} /> {!isLast ? ( <div className="mt-1 min-h-3.5 w-px flex-1 bg-border" /> ) : null} </div> <div className="flex-1"> <div className="text-[12.5px] font-medium text-foreground"> {item.title} </div> {item.subtitle ? ( <div className="text-[11.5px] text-[var(--text-3)]"> {item.subtitle} </div> ) : null} </div> </div> );}
export { Timeline };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this timeline:
npx shadcn@latest add @woxcn/manpowerhub-timeline