Is Vertical Timeline free for commercial use?

Yes. Vertical Timeline is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does the timeline stay accessible and fast?

Yes. The chronology is rendered as a real ordered list, so the full sequence is in the accessibility tree before any entry is reached, and the reveal never changes DOM order or visibility. The spine and markers are decorative and hidden from assistive technology. Only transform and opacity are animated, inside space the list has already reserved, so there is no layout shift, and with reduced motion enabled no scroll triggers are created at all: every entry is visible and the spine is shown fully filled.

How do I recolour the spine and markers?

Set the Tier 3 tokens from your own CSS. timeline-fill controls the accent fill that scrubs in as you scroll, timeline-line sets the muted track behind it, and timeline-marker sets the ring around each entry node. Each one defaults to a semantic token, so the timeline matches your theme until you choose to override it.

Vertical Timeline

A free animated vertical timeline component for React and Next.js.

Automated axe check
Reduced-motion tested
SSR build verified
GSAP
2 runtime packages

Vertical Timeline is a free React timeline component for Next.js, built with GSAP ScrollTrigger and styled with Tailwind. It renders your chronology as a semantic ordered list, then, as the section scrolls into view, fills a spine down the left edge while each entry and its marker light up once in sequence.

You pass an array of items and the component owns the choreography: the spine fill is a single scrubbed transform, and every entry reveals itself once at a fixed scroll position with its marker scaling in and its content rising into place. The full list is authored into the page as real ordered-list markup, so crawlers, keyboard users and reduced-motion visitors always read the complete chronology in order, with the spine shown fully filled and no animation required.

Our story so far

2019
Company founded
Three engineers ship the first prototype from a rented studio and sign the earliest design partners.
2020
Seed round closed
A focused seed round funds the first full-time team and the move to a dedicated platform architecture.
2021
Public launch
The product opens to everyone, reaching ten thousand active teams in the first quarter after launch.
2023
Series A and global expansion
New funding opens offices on three continents and brings enterprise support to regulated industries.
2025
Platform and public API
An extensible platform and public API let customers build their own integrations on top of the core.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/timeline-vertical

Usage

import { TimelineVertical } from "@/components/timeline-vertical";

export default function Page() {
  return (
    <TimelineVertical
      items={[
        { id: "founded", meta: "2019", title: "Company founded", description: "The first prototype ships." },
        { id: "launch", meta: "2021", title: "Public launch", description: "The product opens to everyone." },
        { id: "series-a", meta: "2023", title: "Series A", description: "New funding opens three offices." },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
items	{ id: string; title: string; description: string; meta?: string }[]	required	The chronology, 3 to 8 entries, in display order. Each id is the stable React key and is used to detect a reorder; meta is an optional date or label rendered above the title.
className	string	undefined	Additional classes merged onto the section root.

Customisation

Vertical Timeline exposes four Tier 3 tokens, each defaulting to a semantic token so it themes with the rest of your site out of the box: timeline-line for the muted spine track, timeline-fill for the accent fill that scrubs in, timeline-marker for the entry node ring, and timeline-node for the marker centre. Override any of them from your own CSS without touching the component:

:root {
  --timeline-fill: var(--color-accent-400);
  --timeline-marker: var(--color-accent-400);
}

<TimelineVertical items={items} className="max-w-2xl" />

Frequently asked questions

Is Vertical Timeline free for commercial use?: Yes. Vertical Timeline is MIT licensed, so you can use it in personal and commercial projects without attribution.
Does the timeline stay accessible and fast?: Yes. The chronology is rendered as a real ordered list, so the full sequence is in the accessibility tree before any entry is reached, and the reveal never changes DOM order or visibility. The spine and markers are decorative and hidden from assistive technology. Only transform and opacity are animated, inside space the list has already reserved, so there is no layout shift, and with reduced motion enabled no scroll triggers are created at all: every entry is visible and the spine is shown fully filled.
How do I recolour the spine and markers?: Set the Tier 3 tokens from your own CSS. timeline-fill controls the accent fill that scrubs in as you scroll, timeline-line sets the muted track behind it, and timeline-marker sets the ring around each entry node. Each one defaults to a semantic token, so the timeline matches your theme until you choose to override it.

Related components

More free timelines and steps are on the way. Browse the full component library in the meantime.

Want the full page this belongs to?Template Empire builds complete Next.js templates with this motion system throughout. Browse the paid templates that pair with these free components.Explore Template Empire templates

Vertical Timeline

Our story so far

Company founded

Seed round closed

Public launch

Series A and global expansion

Platform and public API