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

[igormcsouza]

Hello! I'm interested on it too! For now I'm using https://codyhouse.co/gem/horizontal-timeline/

But would like to drop this other package to stay only with shadcn!

[RGSMTHLS]

I want timeline component

[Salman9000]

+1

[orondanelli]

we want this component please!

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[icarns]

Don't close it, we still want this :)

[shadcn]

Moving it here. I’ll add it to the roadmap.

[thehien93]

waiting on this one. But don't know when it appear

[atapas]

+ 1 for this

Anyway to get a beta access of this one, if there?

[SamStenner]

Would love a timeline component!

[louisva-code]

A timeline component is definitely needed..

[Mohendran]

It is definitely needed.

[mooncharlie]

'+ 1 would love a timeline component (horizontal and vertical?)

[Unanimad]

+1

[ReflextionsDev]

Not stale:
#3374

[BeatriceWambuiMbugua]

We need this.