Yami

Search documentation

Search components and pages

Timeline

A vertical timeline for displaying ordered events.

  1. Project created

  2. Design approved

    All stakeholders signed off on the mockups.

  3. Development in progress

    Currently building the core features.

Installation

Add the timeline component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/timeline.json

Usage

import {
  Timeline, TimelineItem, TimelineConnector,
  TimelineContent, TimelineTitle, TimelineDescription, TimelineTime,
} from "@/components/ui/timeline"

<Timeline>
  <TimelineItem>
    <TimelineConnector />
    <TimelineContent>
      <TimelineTitle>Project created</TimelineTitle>
      <TimelineTime>Jan 12, 2025</TimelineTime>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Default

  1. Project created

  2. Design approved

    All stakeholders signed off on the mockups.

  3. Development in progress

    Currently building the core features.

Code

import {
  Timeline, TimelineItem, TimelineConnector,
  TimelineContent, TimelineTitle, TimelineDescription, TimelineTime,
} from "@/components/ui/timeline"
import { CheckCircle2Icon } from "lucide-react"

<Timeline>
  <TimelineItem>
    <TimelineConnector dot={<CheckCircle2Icon className="mt-0.5 size-4 text-primary" />} />
    <TimelineContent>
      <TimelineTitle>Project created</TimelineTitle>
      <TimelineTime>Jan 12, 2025</TimelineTime>
    </TimelineContent>
  </TimelineItem>
</Timeline>