Component Request: Timeline

[yash-bansod-2003]

[AaronTan11]

It's been quite some time this request was opened. Adding a comment here for visibility.

[Seokhyeon315]

We need timeline component

[Febin-Joseph]

Hey guys keep calm Your fav Timeline component is here
fixes this too #2141

[KonixDev]

Hey guys keep calm Your fav Timeline component is here fixes this too #2141

how i install it?

[Febin-Joseph]

Hi @KonixDev if its available in the production of shadcn-ui you can install The Timeline component from it by following this steps.
INSTALLATION STEPS OF TIMELINE COMPONENT :

1. first run this command in your project npx shadcn-ui@latest add timeline

2. Then import it in your project like this
   import {
Timeline,
TimelineItem,
} from "@/components/ui/timeline"

3. Now you can use the timeline component in your project like this, you can add your own custom data in the timeline.

<Timeline>
      <TimelineItem className="text-black text-sm font-medium">
        Think
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Design
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Code
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Deploy
      </TimelineItem>
    </Timeline>

[mshivam019]

Can you post a link? I can't find it

[KonixDev]

Hi @KonixDev if its available in the production of shadcn-ui you can install The Timeline component from it by following this steps. INSTALLATION STEPS OF TIMELINE COMPONENT :

1. first run this command in your project npx shadcn-ui@latest add timeline
2. Then import it in your project like this
   import {
Timeline,
TimelineItem,
} from "@/components/ui/timeline"
3. Now you can use the timeline component in your project like this, you can add your own custom data in the timeline.

<Timeline>
      <TimelineItem className="text-black text-sm font-medium">
        Think
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Design
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Code
      </TimelineItem>
      <TimelineItem className="text-black text-sm font-medium">
        Deploy
      </TimelineItem>
    </Timeline>

nope you have a beta of shadcn because i can't install it

https://ui.shadcn.com/docs/components/timeline

here give me 404 and npx too

[mshivam019]

Since it is still in beta, is there an alternating mode? Something like this.

[mkschreder]

A timeline component would be great

[joshbedo]

Definitely could use this right now

[smanookian]

Yes please add timeline.

Daisy-UI
They did it too

[Zagorodnyi]

+1 for timeline release

[ozandalgali]

Yes! I am waiting for this one.

[flixlix]

Hey, Just added my own implementation of this component, made to be more modular #3374

[sabin-thapa]

Waiting on this one!!

[takakikasuga]

+1

[rafitc]

+1

[saksham-tiwari]

+1

[AldenorJr]

I would really like this component. Please add it =)

[michaelstresing]

+1

[joaogabriels]

+1

[Jackie098]

+1

[jackchealdang]

+1

[blurk]

+1

[Steveb599]

+1

[pqhung3007]

+1

[GraphicOwls]

+1 Is this still being considered?

[Steveb599]

Origin ui are building it right now

[asunyer-ooptimo]

+1

[Lenghak]

Other existing alternative that we can use from Origin UI: https://originui.com/timeline

[kamja44]

Hi! I've submitted a PR adding the Timeline component: #9188

It includes multiple layout positions (left/right/alternate), icon support, variants, and comprehensive documentation. Feedback welcome! 🙏

[NewYanko]

Hi, thanks for your PR. I've copied the code directly from your repo, works for the most part, so far I've found one issue:

• position="center" does not format properly

I'll post an update here if I find out other issues

[kamja44]

Hi! Thank you for testing and reporting this issue! 🙏

I've just fixed the center position rendering problem. The vertical line should now display properly in the center.

What was fixed:

• Added a vertical connecting line in the center for position="center"
• The line is now rendered at the TimelineItem level to maintain proper alignment
• Hidden individual marker lines in center mode to avoid duplication

The fix has been pushed to the feat/timeline branch. Could you please test it again and let me know if there are any other issues?

Thanks again for your feedback!

[NewYanko]

Unless I'm missing something, it's still not great. Everything is out of place:

• The connecting lines are at the center, but OVER the text, haven't had a minute to look at the code properly, but feels statically positioned.
• Text is alternate for some reason?
• Dots are all on the left side, unaligned.

To make the timeline appear as you have in your PR, you need some sort of rigid grid-like layout, with 3 cols (left content, right content, timeline at center), that won't shift when compressed or stretched. Thanks for your efforts!

[Lenghak]

Maybe we can have a root component that act as a boundary for the whole timeline to control the position. I am sorry if i am wrong for i have not seen the whole component yet.

[kamja44]

Implemented alternate mode to automatically handle zig-zag layouts based on index, eliminating the need for manual positioning logic when mapping simple sequential data.

Added list-none, m-0, and p-0 to the Timeline component to prevent layout breakage from global styles or browser defaults.
This approach ensures self-contained styling without increasing DOM depth with an extra wrapper.