Shadcn Timeline

Browse 12 production-ready shadcn timeline components for deployment logs, activity feeds with user avatars, horizontal milestone timelines, roadmaps, order status, git activity, pipeline steps, and vertical and horizontal orientations: a custom ReUI component composable with Avatar, Badge, Collapsible, and Frame.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Project milestones, product roadmaps and release histories, stacked or laid out in a row
Activity feeds and logs such as git events, deploy runs and team member actions
Progress through ordered stages, such as order shipping or a build pipeline

When not to use

A ready made activity feed, approval tracker or changelog to drop into a page: use the Timeline blocks
A full page audit log of access events grouped by day, with filters and export: use the Users blocks
A multi step form or setup flow the user clicks through, one panel at a time: use the Stepper component

Agent notes

onValueChange never fires, since no part changes the step on click or key; progress moves only when you pass a new value
defaultValue is 1 when omitted, which sets data-completed on the TimelineItem with step 1; pass 0 when nothing is done yet
Keep each TimelineItem a direct child of Timeline; wrapping one in an element hides its TimelineSeparator as if it were the last item

Third-party API docs

Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin

Markdownhttps://web.dev.reui.io/components/timeline.md

MCPget_component("timeline")

Installnpx shadcn@latest add @reui/timeline

Full index for agents:llms.txtReUI MCP setup

Shadcn Timeline: Activity Feeds, Logs, and Milestones

ReUI Timeline is a custom shadcn component: not in the base shadcn/ui library: for rendering sequential event data in vertical and horizontal orientations. It composes shadcn Avatar, Badge, Collapsible, Frame, and Spinner to produce activity feeds, deployment logs, audit trails, milestone trackers, and pipeline status indicators.

12 components cover basic timelines, deployment log with collapsible log entries, activity feed with user avatars, compact horizontal milestone timeline, roadmap timeline, order status tracker, git activity history, milestone list, pipeline steps, vertical and horizontal orientations, and timelines with leading labels.

The sections below explain the component architecture, real use cases in DevOps and SaaS products, feature details, and integration guidance.

What is Shadcn Timeline?

ReUI Timeline is a composable list-based component that renders event nodes connected by a vertical or horizontal line. Each node has an icon, avatar, or status indicator on the line, and a content panel beside it containing timestamp, title, description, metadata, and optional actions. The component does not prescribe a data format: pass any array of events and render each node with the content you need.

12 components show the Timeline in realistic production contexts: a deployment log where each deploy event is collapsible to reveal raw log output; an activity feed where commits, comments, and deployments share the same timeline with user Avatar nodes; a horizontal milestone tracker for release or project progress; and a pipeline step indicator for CI/CD status.

Why Use Shadcn Timeline?

Timelines are essential in DevOps dashboards (deployment history, CI/CD pipeline steps), project management tools (milestone progress, sprint activity), e-commerce (order status), and SaaS audit logs (user activity, billing history). A consistent, accessible timeline component prevents ad-hoc list implementations that vary in spacing, icon size, and line rendering across the product.

Collapsible log entries let users expand individual timeline events for detail without navigating away: critical for deployment logs where the event title is a summary and the full output is hundreds of lines. Pair with Shadcn Collapsible for expandable nodes and Shadcn Frame for timeline panels in dashboards.

Shadcn Timeline Features

Vertical and Horizontal Orientation. Switch between vertical (events stacked top to bottom) and horizontal (events left to right) layout. Horizontal orientation works well for milestone trackers and pipeline step indicators.
Deployment Log with Collapsible Entries. Timeline nodes wrap shadcn Collapsible so users can expand a deployment event to read the full build log inline without page navigation. Spinner shows active deployment state.
Activity Feed with Avatars. Activity feed component renders user Avatar nodes on the timeline line for commits, comments, reviews, and deploys: the standard GitHub-style activity feed component.
Roadmap and Milestone Variants. Roadmap timeline groups milestones by quarter or status with Badge labels. Milestone list shows completion state with icon changes from pending to completed.
Order Status and Pipeline Steps. Order status component tracks shipment stages with color-coded state icons. Pipeline steps show CI/CD stage progression: build, test, deploy: with per-step status.
Git Activity History. Git activity component renders commits, merges, and branches in timeline order with commit hash, message, and author avatar: adaptable to any version control activity feed.
Leading and Trailing Labels. Horizontal timeline variant supports leading labels (above or below the line) for date and milestone labels, keeping the timeline line clean while surfacing temporal context.
Frame Container Integration. Timeline components inside Frame containers include a toolbar, header, and optional action button. Renders as a self-contained dashboard widget for activity sidebars and DevOps panels.

ReUI Timeline: In-House Custom Shadcn Component

ReUI Timeline is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Timeline is a custom chronological event component not available in base shadcn/ui. It composes Avatar, Badge, Collapsible, Frame, and Spinner to render deployment logs, activity feeds, order status, git history, roadmaps, and pipeline step indicators. 12 components cover vertical, horizontal, and leading-label layouts with Collapsible-wrapped log entries for expandable detail.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Use Shadcn Avatar for user-attributed timeline nodes in activity feeds, Shadcn Badge for status and category labels on events, and Shadcn Spinner for in-progress nodes in deployment and pipeline timelines.

Wrap expandable timeline nodes in Shadcn Collapsible to show summary headers with on-demand detail expansion: the deployment log component. Use Shadcn Scroll Area around the full timeline list in constrained-height sidebar panels.

Pair Timeline with Shadcn Data Grid for views that switch between timeline and table: both rendering the same event dataset. Use Shadcn Frame to give timeline panels a toolbar, header title, and action button in dashboard layouts.

Timeline Blocks in ReUI Pro

The free examples above pair with 9 production ready timeline blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Timeline (9 blocks)Timeline components for activity feeds, audit histories, release notes, and chronological workflow states.

Browse all Application blocks

Frequently Asked Questions

Should I use horizontal or vertical timeline?

Vertical timeline is the default for chronological event streams (history, activity log, story flow). Horizontal timeline works for milestones or project phases with fewer events. Vertical scales better on mobile.

How do I show loading state while events are being fetched?

Render timeline items with skeleton content while loading. Replace skeletons with actual events once data arrives. Use a Spinner at the bottom if more events are loading on scroll.

Can I make timeline items collapsible to show/hide details?

Yes. Wrap each timeline item content in a Collapsible or Accordion. Users click to expand and see full event details. This reduces visual clutter for long event streams.

How do I make timeline content accessible to screen readers?

Use semantic HTML for events (article, time, header). Add aria-label to each item with a timestamp. Use role="list" and role="listitem" if rendering as a list. Announce state changes when events are added.

Can I use timeline for real-time event streams?

Yes. Append new timeline items at the bottom or top as events arrive. Autoscroll to the latest event or let users scroll freely. Avoid constant scrolling: let users control their view.

What's the difference between ReUI timeline and base shadcn/ui?

ReUI Timeline is a custom in-house component with 12 components for vertical, horizontal, and collapsible layouts. Base shadcn/ui doesn't include a timeline component. ReUI's version integrates with other ReUI components for rich event displays.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.