Timeline
Vertical timeline component with scroll-animated entry and progress line.
Preview
Timeline
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Company history, product roadmaps, and changelog pages.
Why this component matters
Timelines create narrative structure, turning a list of events into a story with progression.
Usage guidance
Use for 4-10 timeline entries. Each entry should have a date, title, and brief description. Animate entries on scroll into view.
Installation
bash
npx shadcn@latest add @aceternity/timelineUsage
example.tsxtsx
import { Timeline } from "@/components/ui/timeline";
export default function Example() {
return (
<Timeline>
{/* Your content here */}
</Timeline>
);
}Source
timeline.tsx
components/ui/timeline.tsx