Getting Started

Everything you need to install and start using TimelineKit in your project.

Installation

Install the package for your framework. All wrappers include @timelinekit/core as a dependency.

Terminal

npm install @timelinekit/react

Import Styles

Add the stylesheet to your application entry point:

import '@timelinekit/core/styles';

This includes styles for all components. To import only a specific component, use @timelinekit/core/styles/gc, /rs, or /ec. SCSS sources are available via @timelinekit/core/styles/scss.

Optional dependencies

For image, PDF, and Excel export, install the optional peer dependencies:

npm install html2canvas jspdf exceljs

Quick Start

A minimal example to render a Gantt chart. See also the Gantt docs and Scheduler docs for full API reference.

App.tsx

import { useRef, useCallback } from 'react';
import { GanttChart, GanttChartRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

function day(offset: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  d.setHours(0, 0, 0, 0);
  return d;
}

export default function App() {
  const ref = useRef<GanttChartRef>(null);

  const handleReady = useCallback(() => {
    const gantt = ref.current;
    if (!gantt) return;
    const list = gantt.list;
    list.clear();

    const t1 = list.createTask('1');
    t1.name = 'Planning';
    t1.startTime = day(1);
    t1.endTime = day(4);
    list.addTask(t1);

    const t2 = list.createTask('2');
    t2.name = 'Development';
    t2.startTime = day(7);
    t2.endTime = day(18);
    list.addTask(t2);

    const t3 = list.createTask('3');
    t3.name = 'Testing';
    t3.startTime = day(21);
    t3.endTime = day(25);
    list.addTask(t3);

    list.addLink(t1, t2, 'finishToStart');
    list.addLink(t2, t3, 'finishToStart');
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <GanttChart ref={ref} onReady={handleReady} />
    </div>
  );
}

Next steps

Gantt — tasks, dependencies, critical path, and full API reference
Scheduler — resources, events, multi-lane layout, and full API reference
Theming & Styles — customize colors, fonts, and themes
Examples — ready-to-run projects for React, Vue, and Angular on GitHub