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!!

[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.

[Prajwal-alphanimble]

you might wanna check out this discussion where I implemented a new resizable and dragable dashboard layout... this can be very helpfull to many developers in making analytic, sharable dashboard, the users can alter the dashboard based on their liking...

The disscussion link: #10466