1 GitHub star = 1 new component.

Star the repo
Data Displayganttprojectdata

Gantt Timeline UI

Horizontal timeline bar chart showing project task durations.

Usage

Copy and paste this code into your React component:

tsx
import { GanttChartMinimal } from 'react-component-kit-ui/data';

<GanttChartMinimal>Content</GanttChartMinimal>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/GanttChartMinimal.tsx + GanttChartMinimal.css:

GanttChartMinimal.tsx
'use client';

import './GanttChartMinimal.css';

/** GanttChartMinimal โ€” ported from astro-component-kit. */
export interface GanttChartMinimalProps {
}

export function GanttChartMinimal({}: GanttChartMinimalProps) {
  return (
    <>
      <div className="gantt" data-rk-fd4a22="">
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "40%", marginLeft: "10%", background: "#6366f1" }} data-rk-fd4a22=""></div></div>
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "30%", marginLeft: "55%", background: "#c084fc" }} data-rk-fd4a22=""></div></div>
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "20%", marginLeft: "20%", background: "#10b981" }} data-rk-fd4a22=""></div></div>
      </div>
    </>
  );
}

export default GanttChartMinimal;
GanttChartMinimal.css
/* GanttChartMinimal โ€” ported from astro-component-kit (data/GanttChartMinimal.astro) */

.gantt:where([data-rk-fd4a22]) { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
.g-row:where([data-rk-fd4a22]) { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; }
.g-bar:where([data-rk-fd4a22]) { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

Quick Info

Category
Data Display
Filename
GanttChartMinimal.tsx
Dependencies
None โ€” pure React + CSS
Tags
ganttprojectdata