Data Display ganttprojectdata

Gantt Timeline UI

Simplified bar-based timeline for project schedules.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GanttTimelineUI } from 'astro-component-kit';
---

<GanttChartMinimal>Content</GanttChartMinimal>
--- import { GanttTimelineUI } from 'astro-component-kit'; --- <GanttChartMinimal>Content</GanttChartMinimal>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GanttTimelineUI.astro and paste the following code:

astro 
---
---
<div class="gantt">
  <div class="g-row"><div class="g-bar" style="width: 40%; margin-left: 10%; background: #6366f1"></div></div>
  <div class="g-row"><div class="g-bar" style="width: 30%; margin-left: 55%; background: #c084fc"></div></div>
  <div class="g-row"><div class="g-bar" style="width: 20%; margin-left: 20%; background: #10b981"></div></div>
</div>
<style>
  .gantt { 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 { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; }
  .g-bar { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
</style>
--- --- <div class="gantt"> <div class="g-row"><div class="g-bar" style="width: 40%; margin-left: 10%; background: #6366f1"></div></div> <div class="g-row"><div class="g-bar" style="width: 30%; margin-left: 55%; background: #c084fc"></div></div> <div class="g-row"><div class="g-bar" style="width: 20%; margin-left: 20%; background: #10b981"></div></div> </div> <style> .gantt { 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 { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; } .g-bar { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } </style>

Quick Info

Category
Data Display
Filename
GanttTimelineUI.astro
Dependencies
None — pure Astro + CSS
Tags
ganttprojectdata