Shadcn Timeline Git Activity

Timeline with git activity. Built with the Timeline component. A free, open source shadcn timeline example you can install with npx shadcn@latest add @reui/c-timeline-4 and edit as your own code.

Timeline with git activity.

For AI Agents

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

Best for: A distinct icon inside each filled node, such as fork, pull request and merge, with the relative time under the description

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

gitActivity stores a JSX icon per entry, so data from an API needs a map from event type to icon in its place
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

Markdownhttps://reui.io/components/timeline/c-timeline-4.md

MCPget_example("c-timeline-4")

Installnpx shadcn@latest add @reui/c-timeline-4

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Timeline Git Activity

Timeline

About Shadcn Timeline Git Activity

Timeline with git activity. Built with the Timeline component. A free, open source shadcn timeline example you can install with npx shadcn@latest add @reui/c-timeline-4 and edit as your own code.

What You Can Build With Shadcn Timeline Git Activity

Composes Timeline, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-timeline-4
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Timeline Examples

Basic Basic timeline.
Roadmap Timeline with roadmap.
Order Status Timeline with order status.
Milestones Timeline with milestones.
Pipeline Steps Timeline with pipeline steps.
Roadmap Items Timeline with roadmap items.
Horizontal Vertical timeline
Leading Labels Horizontal timeline with leading labels
Deployment Log Deployment log timeline
Avatar Activity Activity feed timeline with user avatars
Compact Milestones Compact horizontal milestone timeline

Related Shadcn Component Categories

Toggle
Open-source shadcn toggle components for formatting controls, compact actions, and binary UI states.
Toggle Group
Open-source shadcn toggle group components for view switches, toolbar options, and mutually exclusive actions.
Tooltip
Open-source shadcn tooltip components for inline hints, contextual guidance, and helper text.
Tree
Open-source shadcn tree components for file explorers, nested navigation, and hierarchical data.
Accordion
Open-source shadcn accordion components for FAQ layouts, settings panels, and help sections.
Alert
Open-source shadcn alert components for status messages, warning banners, and destructive notices.

Frequently Asked Questions

When should I use Shadcn Timeline Git Activity?

Use it for a distinct icon inside each filled node, such as fork, pull request and merge, with the relative time under the description.

Shadcn Timeline as a whole fits:

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

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

How do I install Shadcn Timeline Git Activity?

Run npx shadcn@latest add @reui/c-timeline-4. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Timeline Git Activity free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Timeline Git Activity use?

It composes Timeline. The shadcn CLI installs those alongside the example.

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.