@roadline/react

React bindings for Roadline — a headless, virtualized timeline / Gantt component. Zero runtime dependencies.

npm install @roadline/react @roadline/styles

import { Timeline, useTimeline } from '@roadline/react'
import '@roadline/styles/roadline.css'

const timeline = useTimeline({
  items,
  groups,
  defaultRange: { start, end },
  sidebarWidth: 160,
  snap: 'day',
  onItemMove: ({ itemId, start, end }) => update(itemId, start, end),
})

return (
  <Timeline.Root instance={timeline} style={{ height: 400 }}>
    <Timeline.Sidebar />
    <Timeline.Header />
    <Timeline.Body>
      <Timeline.Grid />
    </Timeline.Body>
  </Timeline.Root>
)

Exports useTimeline, the Timeline.* primitives (Root, Sidebar, Header, Body, Grid, Dependencies, Marker), useItemTooltip, and the types from @roadline/core.

React 18 or 19 is a peer dependency.

Full documentation — getting started, API reference, recipes, theming and a migration guide from react-calendar-timeline — lives in the repository, under docs/.

MIT