Scroll the timeline

2021

The first commit

2021

A single component and a big idea — a design system that feels alive, not templated.

2023

Ten thousand stars

2023

The community took over. Contributions poured in and the library tripled in a single quarter.

2025

One hundred components

2025

From buttons to WebGL globes, every surface got the same obsessive motion polish.

Today

Just getting started

Today

Scroll back up and watch the line trace your journey. The next chapter is yours to write.

Scroll Timeline

tsx

import { ScrollTimeline } from "@/components/godui/scroll-timeline";export function Changelog() {return (  <ScrollTimeline    data={[      { date: "2021", title: "The first commit", content: <p>A single component.</p> },      { date: "2023", title: "Ten thousand stars", content: <p>The community took over.</p> },      { date: "2025", title: "One hundred components", content: <p>Every surface, polished.</p> },    ]}  />);}

Documentation

Learn Playground

A vertical timeline built for storytelling: a progress line traces down the rail as you scroll, entries fade up into place, and each label sticks while its section is in view. Scroll the preview to draw the line.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/scroll-timeline.json"

ScrollTimeline measures its track and maps scroll progress to the accent line's height, so the rail fills exactly as far as you've read. Entries fade up once on enter, and the date rail stays sticky while its entry is on screen. Under reduced motion the line is drawn in full and entries appear statically.

Usage

tsx

import { ScrollTimeline } from "@/components/godui/scroll-timeline";

tsx

<ScrollTimeline
  data={[
    {
      date: "Q1",
      title: "Discovery",
      content: <p>Research, interviews, and a first prototype.</p>,
    },
    {
      date: "Q2",
      title: "Build",
      content: <p>Shipped the beta to early customers.</p>,
    },
  ]}
/>

Props

Prop	Type	Default	Description
`data`	`TimelineEntry[]`	—	Entries to render top to bottom.

Each entry is { title: string; date?: string; content: React.ReactNode }. ScrollTimeline also forwards every standard <div> attribute to the root.