1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosganttprojectdata

Gantt Timeline UI

Diagrama de Gantt minimalista para seguimiento de fases temporales y tareas.

Uso

Copia y pega este código directamente en tu componente React:

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

<GanttChartMinimal>Content</GanttChartMinimal>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: 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); }

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
GanttChartMinimal.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
ganttprojectdata