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

[axeloehrli]

Hey, are there any intentions to add this component? it would be very useful for my project

[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 :)