Shadcn Timeline Compact Milestones

Compact horizontal milestone timeline. Built by composing Badge, Timeline. Uses cn alongside the shadcn primitives. A free, open source shadcn timeline example you can install with npx shadcn@latest add @reui/c-timeline-12 and edit as your own code.

Compact horizontal milestone timeline

For AI Agents

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

Best for: Versions across a row with check, play or circle nodes by status and a Current badge on the version in progress

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

Node look and the Current badge follow status in releases, set to released, current or upcoming; defaultValue changes nothing visible
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-12.md

MCPget_example("c-timeline-12")

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

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Timeline Compact Milestones

Dependencies

About Shadcn Timeline Compact Milestones

What You Can Build With Shadcn Timeline Compact Milestones

Composes Badge, Timeline, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-timeline-12
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.
Git Activity Timeline with git activity.
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

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 Compact Milestones?

Use it for versions across a row with check, play or circle nodes by status and a Current badge on the version in progress.

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 Compact Milestones?

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

Is Shadcn Timeline Compact Milestones free to use?

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

Which components does Shadcn Timeline Compact Milestones use?

It composes Badge, 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.