Skip to content
Cuelark UI
DisplayAnimated

Timeline

Timelines whose rail draws itself as you scroll.

Timelines show events in order: changelogs, histories, order tracking. With animate, the rail draws itself as you scroll and each marker lights up when the line reaches it.

Preview

  1. v1.0

    Cuelark UI 1.0

    52 components, GSAP motion tokens and the live theme editor.
  2. v0.9

    Motion layer

    One --cl-motion knob scales every animation, and reduced motion always wins.
  3. v0.8

    Crop marks

    The signature cue marks land on cards, dialogs and popovers.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/timeline.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/timeline.

Builds on: motion

Usage

import { Timeline, TimelineItem, TimelineTime, TimelineTitle } from "@/components/ui/timeline";

<Timeline animate>
  <TimelineItem>
    <TimelineTime dateTime="2026-10-27">Oct 27</TimelineTime>
    <TimelineTitle>1.0 released</TimelineTitle>
  </TimelineItem>
</Timeline>

Motion

How it moves

GSAP ScrollTrigger scrubs the rail; entries slide in and markers light up as they are reached.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Timeline

PropTypeDefaultDescription
animatebooleanfalseScroll-drawn rail.

TimelineItem · TimelineTime · TimelineTitle · TimelineDescription

TimelineTime is a <time>; TimelineTitle an <h3>.

Accessibility

  • An ordered list with <time datetime> elements.
  • Content is visible without JavaScript; animation is an enhancement.

FAQ

Also searched as: react timeline · changelog component · vertical timeline · scroll animation timeline · activity feed