Velora UI

Timeline

Vertical timeline with sticky labels and a gradient beam that fills as you scroll.

  • 1.3 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

  1. 2023

    Two engineers, one spare room and a shared belief that UI libraries should ship as source you own.

    First commit
    Kitchen-table office

  2. 2024

    The first public release. A thousand teams installed a component in the first month, and the issue tracker never slept again.

    v1.0 launch
    1,000 teams

  3. 2025

    Theming, reduced-motion support and an accessibility audit of every component. Contributors from 40 countries.

    Theme builder
    Community call

  4. Today

    Still small, still shipping. The next chapter is being written in the open.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/timeline.json

Adds components/velora/timeline.tsx, installs motion.

Examples

Product changelog

Release notes with version labels, change badges and chart previews drawn in Tailwind.

Changelog

  1. v3.2Sep 2026

    Usage insights

    • NewPer-seat usage chart on the billing page.
    • ImprovedExports finish up to 4× faster.

  2. v3.1Aug 2026

    Keyboard everywhere

    • NewCommand menu on ⌘K with fuzzy search.
    • FixedFocus no longer escapes the settings dialog.

  3. v3.0Jun 2026

    A new dashboard

    • NewCustomisable widgets with drag to reorder.
    • ImprovedDark mode contrast across every chart.
    • FixedTimezones in scheduled reports.

Props

PropTypeDefault
items*

Entries, rendered in order as an ordered list

TimelineItem[]—
container

Scrollable element to track instead of the window

React.RefObject<HTMLElement | null>—

Also accepts every <div> attribute, forwarded to the root element.

TimelineItem

interface TimelineItem {
  /** Label pinned beside the entry, e.g. a date or version */
  title: React.ReactNode;
  /** Body shown to the right of the label */
  content: React.ReactNode;
}

Accessibility

Reduced motion
The beam is drawn in full from the start and its glowing head is hidden; labels still stick, which is layout rather than animation.
Keyboard
Decorative — nothing to operate.
Screen readers
Entries are an ordered list; each label is an h3 followed by its content, and the track, beam and dots are aria-hidden.