Shadcn Timeline

Timeline is a vertical project timeline block that walks through milestones from kickoff to production release alongside a recent activity list. Each milestone node shows a done, active, or upcoming state with icons and Shadcn UI badges, while activity entries cover status changes, comments, tags, assignments, file uploads, and merges. It is a static server-rendered React component styled entirely with Tailwind, so it needs no client state. Use it in React directly, or take the Vuejs or Svelte version.

Pro

Other Timelines Examples

Activity Feed

Product Lists

Get Unlimited Access to All Examples & Blocks.

Unlock everything with a single payment. Get lifetime access to all content. You will also receive free access to all new examples.

Buy Now

One Page, Two Vertical Rails: Milestones Plus Activity

The Timeline block stacks two complementary React components in a single max-w-xl column: MilestoneTimeline, which plots six dated project milestones from kickoff to production release, and ActivityTimeline, which lists recent team events like comments, merges, and status changes. Together they read as a project detail sidebar you can lift wholesale, or split apart, since each component is self contained with its own data array and rail line.

Milestone States and Their Markers

Each milestone carries a status of done, active, or upcoming, and the marker changes accordingly: completed items get a filled emerald disc with a white check, the active item gets a primary colored dot wrapped in a soft ring-primary/15 halo, and future items get a hollow border circle while their text drops to half opacity. A matching Badge, secondary for Done, solid for In Progress, outline for Upcoming, sits beside each title, and the connecting rail is one absolutely positioned w-0.5 bg-border line running behind the markers.

A Config Object per Event Type

ActivityTimeline is driven by an ACTIVITY_CONFIG map that assigns each of six event types, status, comment, tag, assignment, file, and merge, an icon from lucide, a tinted background such as bg-violet-50 with a dark:bg-violet-950 twin, an accent color, and a verb phrase like left a comment. Rendering a row is just a lookup plus interpolation, so introducing a new event type means adding one key to the map and one object to the data array, with no changes to the JSX.

Roadmap, Release, and Project Detail Views

Use the milestone half wherever phased progress needs a glanceable answer to where are we: project overviews, client status reports, or delivery dashboards. It also works as a compact cousin to the fuller planning layouts in the roadmaps blocks. The activity half suits ticket detail panes and audit trails, and because both share visual language, mixing them on one screen feels intentional rather than stitched.

Two Shadcn UI Components, Lots of Tailwind

Structurally this block is lean: Badge and the cn class merger are the only Shadcn UI imports, and everything else is Tailwind utility composition over theme tokens, border for rails, muted-foreground for secondary text, primary for the active pulse. That token diet means dark mode needs no dedicated styling beyond the few tinted icon backgrounds, which already declare dark variants. Framework choice is open too: pick the React source, the Vuejs edition built on shadcn-vue, or the Svelte edition built on shadcn-svelte, and the markup translates one to one.

Copy or CLI: Getting the Timeline

Timeline is a Pro example, meaning an All Access license is what turns the code tab from locked to copyable. To bring it in, use the command at the head of the example page, where tabs let you pick npm, pnpm, yarn, or bun for the shadcn CLI, or copy the single page.tsx by hand, since the whole block, data included, lives in one file.

Frequently Asked Questions

Why does this example render two separate timelines?

They answer different questions: the milestone rail shows planned, dated phases with completion states, while the activity rail shows an unplanned stream of team events. Shipping both in one block lets you take either alone or present plan versus reality side by side on a project page.

How do I mark a milestone as completed?

Change its status field from active or upcoming to done in the milestones array. The marker, the badge, and the text opacity all key off that one property through conditional classes, so no other edits are needed.

What is the ACTIVITY_CONFIG object for?

It centralizes the look of every activity type: icon, tinted background with a dark pair, accent color, and the verb shown after the user's name. Rows never hardcode appearance, they look it up by type, which keeps eight event types visually consistent from a single source.

Can this run as a React server component?

Yes. There is no use client directive, no hooks, and no event handlers, only arrays mapped to markup. That makes it safe to render on the server and free to hydrate, and it is equally simple in the Vuejs and Svelte builds.

How hard is it to add a seventh milestone or a new event kind?

A milestone is one object appended to the milestones array. A new activity kind takes two steps: add an entry to ACTIVITY_CONFIG with an icon and colors, then add data rows using that type. The rail lines and spacing adjust automatically because they are computed from the flow, not fixed heights.