Docs
Timeline

Timeline

Timeline displays a list of events in chronological order.

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add timeline

Usage

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline"
<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Eat</TimelineTitle>
      <TimelineDescription>Because you need strength</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Code</TimelineTitle>
      <TimelineDescription>Because it's awesome!</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Sleep</TimelineTitle>
      <TimelineDescription>Because you need rest</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Repeat</TimelineTitle>
      <TimelineDescription>
        Because this is the life you love!
      </TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Default

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!

Alternate

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!

With Icon

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!

Horizontal

  1. Ordered
    9.15 AM, January 1, 2024
  2. Shipped
    12:20 PM, January 4, 2024
  3. Out for Delivery
    07:00 AM, January 8, 2024

Changelog

10 Febuary 2025 - a11y for title and description

  • Changed the TimelineTitle and TimelineDescription components to use div instead of h3 and p to improve accessibility.
timeline.tsx
export const TimelineTitle = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>((props, ref) => {
  const { orientation } = useTimeline()
 
  return <div ref={ref} data-orientation={orientation} {...props} />
})
TimelineTitle.displayName = "TimelineTitle"
 
export const TimelineDescription = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => {
  const { orientation } = useTimeline()
 
  return (
    <div
      ref={ref}
      data-orientation={orientation}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
TimelineDescription.displayName = "TimelineDescription"
Time