Professional Gantt Chart + Kanban Board + ListView + CalendarBoard for React - Part of LibXAI Suite - TypeScript - Production-Ready - Zero Config
npm install @libxai/board
Professional Gantt Chart + Kanban Board for React
Production-ready. TypeScript. Zero configuration.
bash
npm install @libxai/board
`
For AI features (optional):
`bash
npm install ai
`
---
Quick Start
$3
`tsx
import { GanttBoard } from '@libxai/board';
import '@libxai/board/styles.css';
function App() {
const [tasks, setTasks] = useState([
{
id: '1',
name: 'Project Planning',
startDate: new Date('2024-01-01'),
endDate: new Date('2024-01-15'),
progress: 50,
status: 'in-progress',
},
{
id: '2',
name: 'Development',
startDate: new Date('2024-01-16'),
endDate: new Date('2024-02-15'),
progress: 0,
status: 'todo',
dependencies: ['1'], // Depends on task 1
},
]);
return (
tasks={tasks}
onTasksChange={setTasks}
config={{
theme: 'dark',
locale: 'es', // Spanish UI
timeScale: 'week',
// Callbacks for persistence
onTaskUpdate: async (task) => {
await saveToDatabase(task);
},
onMultiTaskDelete: async (taskIds) => {
await deleteFromDatabase(taskIds);
},
// Permissions (CASL compatible)
permissions: {
canCreateTask: true,
canUpdateTask: true,
canDeleteTask: true,
},
}}
/>
);
}
`
$3
`tsx
import { KanbanBoard, useKanbanState } from '@libxai/board';
import '@libxai/board/styles.css';
function App() {
const { board, callbacks } = useKanbanState({
initialBoard: {
id: 'my-board',
columns: [
{ id: 'todo', title: 'To Do', position: 1000, cardIds: [] },
{ id: 'doing', title: 'In Progress', position: 2000, cardIds: [] },
{ id: 'done', title: 'Done', position: 3000, cardIds: [] },
],
cards: [],
},
});
return ;
}
`
---
Features
$3
- 40+ Callbacks for full integration with any backend
- Critical Path Method (CPM) - Automatic calculation, FREE
- Auto-Scheduling - Dependency cascade on drag
- Split Tasks - Pause work with gaps (Bryntum-style)
- Dependencies - SS, FF, SF, FS with circular detection
- Export - PDF, Excel, PNG, CSV
- Zoom Levels - Hour, Day, Week, Month, Quarter, Year
- Undo/Redo - 50 levels of history
- Multi-level Hierarchy - Unlimited nesting
- Milestones - Diamond markers
- Today Line - Visual indicator
$3
- Drag & Drop - Powered by @dnd-kit
- Virtual Scrolling - Handle 10,000+ cards
- Filtering & Search - Advanced queries
- Multi-select - Bulk operations
- Command Palette - Cmd+K / Ctrl+K
- Import/Export - JSON, CSV, PDF
$3
- TypeScript - Complete type definitions
- Themes - Dark, Light, Neutral (or custom)
- i18n - English, Spanish (extensible)
- Accessibility - WCAG AA compliant
- Keyboard Shortcuts - Full navigation
- Zero Config - Works out of the box
---
Configuration
$3
`tsx
interface GanttConfig {
// Appearance
theme?: 'dark' | 'light' | 'neutral';
locale?: 'en' | 'es';
timeScale?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
rowDensity?: 'compact' | 'comfortable' | 'spacious';
// Features
enableAutoCriticalPath?: boolean;
showThemeSelector?: boolean;
showCreateTaskButton?: boolean;
// Permissions (CASL compatible)
permissions?: {
canCreateTask?: boolean;
canUpdateTask?: boolean;
canDeleteTask?: boolean;
canReorderTasks?: boolean;
canExport?: boolean;
};
// Callbacks
onTaskClick?: (task: Task) => void;
onTaskDblClick?: (task: Task) => void;
onTaskUpdate?: (task: Task) => void;
onMultiTaskDelete?: (taskIds: string[]) => void;
onProgressChange?: (taskId: string, oldProgress: number, newProgress: number) => void;
// Context Menu Callbacks (v0.16.0+)
onTaskEdit?: (task: Task) => void;
onTaskAddSubtask?: (parentTask: Task) => void;
onTaskMarkIncomplete?: (task: Task) => void;
onTaskSetInProgress?: (task: Task) => void;
// AI Assistant (optional)
aiAssistant?: {
enabled: boolean;
onCommand: (command: string) => Promise;
};
}
`
$3
`tsx
interface Task {
id: string;
name: string;
startDate?: Date;
endDate?: Date;
progress?: number; // 0-100
status?: 'todo' | 'in-progress' | 'completed';
color?: string; // Custom color
isMilestone?: boolean;
parentId?: string; // For subtasks
dependencies?: string[]; // Task IDs
assignees?: Array<{ id: string; name: string; initials: string; color: string }>;
subtasks?: Task[]; // Nested tasks
}
`
---
Internationalization (i18n)
Built-in support for English and Spanish:
`tsx
config={{
locale: 'es', // Spanish
customTranslations: {
// Override specific strings
toolbar: {
createTask: 'Crear Nueva Tarea',
},
},
}}
/>
`
$3
`tsx
const frenchTranslations = {
columns: { taskName: 'Nom de la tâche', ... },
toolbar: { createTask: 'Nouvelle tâche', ... },
contextMenu: { editTask: 'Modifier', ... },
};
config={{
locale: 'en', // Base
customTranslations: frenchTranslations,
}}
/>
`
---
Imperative API
Access methods via ref:
`tsx
import { GanttBoard, GanttBoardRef } from '@libxai/board';
function App() {
const ganttRef = useRef(null);
const handleAddTask = () => {
ganttRef.current?.addTask({
name: 'New Task',
startDate: new Date(),
endDate: new Date(Date.now() + 7 24 60 60 1000),
});
};
return (
<>
>
);
}
`
$3
- addTask(task), updateTask(id, updates), deleteTask(id)
- splitTask(id, splitDate, gapDays)
- calculateCriticalPath()
- undo(), redo()
- exportToPDF(), exportToExcel(), exportToPNG(), exportToCSV()
- setZoom(level), scrollToTask(id), scrollToToday()`
Made with care by LibXAI