Components

Timeline

Vertical event list: the spine draws itself downward as the list scrolls into view, while each node pops and its content drifts in the first time it enters the viewport.

  1. Beam shippedJust now
    v2.4 rolls out to every workspace.
  2. Dock magnified2d ago
    Cursor-distance scaling lands.
  3. First lumenMay 2026
    The accent finds its glow.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal
npx lumora-ui@latest add timeline

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx
import { Timeline } from "@lumora/ui/components/timeline";
// or from the barrel:
import { Timeline } from "@lumora/ui";

Props worth knowing

items take { title, time?, body?, icon? }. The spine draws itself downward the first time the list scrolls into view, while each node pops and its content drifts in. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.